{"id":2900,"date":"2025-06-06T17:16:28","date_gmt":"2025-06-06T15:16:28","guid":{"rendered":"https:\/\/chatimeet.com\/?page_id=2900"},"modified":"2025-06-06T17:17:53","modified_gmt":"2025-06-06T15:17:53","slug":"video-chat","status":"publish","type":"page","link":"https:\/\/chatimeet.com\/es\/video-chat\/","title":{"rendered":"Videochat"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2900\" class=\"elementor elementor-2900\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dbb2863 elementor-section-full_width elementor-section-height-min-height elementor-section-height-default elementor-section-items-middle\" data-id=\"dbb2863\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5d35808\" data-id=\"5d35808\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dcacf4b elementor-widget elementor-widget-shortcode\" data-id=\"dcacf4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <style>\n        \/* Only dynamic CSS variables from WordPress settings - everything else moved to external CSS *\/\n        :root {\n          --button-color: #fe7870;\n          --button-hover-color: #aa504b;\n          --button-active-color: #fe7870;\n          --meetgle-logo-url: url('https:\/\/chatimeet.com\/wp-content\/uploads\/2021\/02\/chatimeet-logo-1.png');\n        }\n        \n        \/* ========================================\n           SKELETON LOADING STYLES (INLINE)\n           Shows immediately before external CSS loads\n           ======================================== *\/\n        .meetgle-skeleton {\n          position: fixed;\n          top: 0;\n          left: 0;\n          width: 100vw;\n          height: 100vh;\n          z-index: 99999;\n          display: flex;\n          background: #0F0F0F;\n          opacity: 1;\n          transition: opacity 0.3s ease-out;\n        }\n        \n        .meetgle-skeleton.hidden {\n          opacity: 0;\n          pointer-events: none;\n        }\n        \n        .meetgle-skeleton-left,\n        .meetgle-skeleton-right {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          position: relative;\n        }\n        \n        .meetgle-skeleton-left {\n          background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);\n        }\n        \n        .meetgle-skeleton-right {\n          background: #23272A;\n        }\n        \n        \/* Shimmer animation *\/\n        @keyframes skeleton-shimmer {\n          0% { background-position: -200% 0; }\n          100% { background-position: 200% 0; }\n        }\n        \n        .skeleton-shimmer {\n          background: linear-gradient(90deg, \n            rgba(255,255,255,0.03) 25%, \n            rgba(255,255,255,0.08) 50%, \n            rgba(255,255,255,0.03) 75%\n          );\n          background-size: 200% 100%;\n          animation: skeleton-shimmer 1.5s ease-in-out infinite;\n        }\n        \n        \/* Skeleton elements *\/\n        .skeleton-btn {\n          border-radius: 50px;\n          height: 48px;\n          width: 180px;\n        }\n        \n        .skeleton-btn-circle {\n          border-radius: 50%;\n          width: 48px;\n          height: 48px;\n        }\n        \n        .skeleton-center {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 20px;\n        }\n        \n        .skeleton-status {\n          height: 14px;\n          width: 200px;\n          border-radius: 7px;\n        }\n        \n        .skeleton-btn-row {\n          display: flex;\n          gap: 12px;\n          align-items: center;\n        }\n        \n        \/* Top controls skeleton *\/\n        .skeleton-top-controls {\n          position: absolute;\n          top: 10px;\n          left: 10px;\n          right: 10px;\n          display: flex;\n          justify-content: space-between;\n          padding: 10px;\n        }\n        \n        .skeleton-top-left,\n        .skeleton-top-right {\n          display: flex;\n          gap: 8px;\n        }\n        \n        .skeleton-pill {\n          height: 36px;\n          width: 80px;\n          border-radius: 18px;\n        }\n        \n        .skeleton-pill-small {\n          height: 36px;\n          width: 50px;\n          border-radius: 18px;\n        }\n        \n        \/* Right panel skeleton *\/\n        .skeleton-video-area {\n          flex: 2;\n          background: #0F0F0F;\n          position: relative;\n        }\n        \n        .skeleton-count {\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 15px;\n        }\n        \n        .skeleton-count-number {\n          height: 72px;\n          width: 120px;\n          border-radius: 8px;\n        }\n        \n        .skeleton-count-label {\n          height: 16px;\n          width: 180px;\n          border-radius: 8px;\n        }\n        \n        .skeleton-avatars {\n          display: flex;\n          gap: -10px;\n          margin-top: 20px;\n        }\n        \n        .skeleton-avatar {\n          width: 50px;\n          height: 50px;\n          border-radius: 50%;\n          margin-left: -10px;\n        }\n        \n        .skeleton-avatar:first-child {\n          margin-left: 0;\n        }\n        \n        \/* Top right buttons (settings, avatar) *\/\n        .skeleton-top-right-remote {\n          position: absolute;\n          top: 10px;\n          right: 10px;\n          display: flex;\n          gap: 8px;\n        }\n        \n        \/* Mobile skeleton layout *\/\n        @media (max-width: 900px) {\n          .meetgle-skeleton {\n            flex-direction: column;\n          }\n          \n          .meetgle-skeleton-left,\n          .meetgle-skeleton-right {\n            flex: none;\n            height: 50vh;\n          }\n          \n          .skeleton-btn {\n            height: 44px;\n            width: 160px;\n          }\n          \n          .skeleton-btn-circle {\n            width: 44px;\n            height: 44px;\n          }\n          \n          .skeleton-count-number {\n            height: 56px;\n            width: 100px;\n          }\n        }\n        <\/style>\n        \n        <!-- Skeleton Loading Screen - Shows immediately while assets load -->\n        <div id=\"meetgleSkeleton\" class=\"meetgle-skeleton\">\n          <!-- Left panel (remote video area) -->\n          <div class=\"meetgle-skeleton-left\">\n            <!-- Top right buttons -->\n            <div class=\"skeleton-top-right-remote\">\n              <div class=\"skeleton-btn-circle skeleton-shimmer\"><\/div>\n              <div class=\"skeleton-btn-circle skeleton-shimmer\"><\/div>\n            <\/div>\n            \n            <!-- Center content -->\n            <div class=\"skeleton-center\">\n              <div class=\"skeleton-status skeleton-shimmer\"><\/div>\n              <div class=\"skeleton-btn-row\">\n                <div class=\"skeleton-btn skeleton-shimmer\"><\/div>\n                                <div class=\"skeleton-btn-circle skeleton-shimmer\"><\/div>\n                              <\/div>\n            <\/div>\n          <\/div>\n          \n          <!-- Right panel (local video + controls) -->\n          <div class=\"meetgle-skeleton-right\">\n            <div class=\"skeleton-video-area\">\n              <!-- Top controls -->\n              <div class=\"skeleton-top-controls\">\n                <div class=\"skeleton-top-left\">\n                  <div class=\"skeleton-pill skeleton-shimmer\"><\/div>\n                  <div class=\"skeleton-pill skeleton-shimmer\"><\/div>\n                <\/div>\n                <div class=\"skeleton-top-right\">\n                  <div class=\"skeleton-pill-small skeleton-shimmer\"><\/div>\n                  <div class=\"skeleton-pill skeleton-shimmer\"><\/div>\n                <\/div>\n              <\/div>\n              \n              <!-- Center count placeholder -->\n              <div class=\"skeleton-count\">\n                <div class=\"skeleton-count-number skeleton-shimmer\"><\/div>\n                <div class=\"skeleton-count-label skeleton-shimmer\"><\/div>\n                <div class=\"skeleton-avatars\">\n                  <div class=\"skeleton-avatar skeleton-shimmer\"><\/div>\n                  <div class=\"skeleton-avatar skeleton-shimmer\"><\/div>\n                  <div class=\"skeleton-avatar skeleton-shimmer\"><\/div>\n                  <div class=\"skeleton-avatar skeleton-shimmer\"><\/div>\n                  <div class=\"skeleton-avatar skeleton-shimmer\"><\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        \n        <div id=\"meetgle-video-container\">\n            <div class=\"video-chat-layout\">\n                <!-- Left: Remote video full height -->\n                <div class=\"video-section\">\n                    <div class=\"video-wrapper remote-video\">\n                        <!-- Swirl background canvas -->\n                        <canvas id=\"bg-swirl\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;\"><\/canvas>\n                                                <img decoding=\"async\" id=\"remoteLogo\" src=\"https:\/\/chatimeet.com\/wp-content\/uploads\/2021\/02\/chatimeet-logo-1.png\" alt=\"Logo\" style=\"position:absolute;top:10px;left:12px;height:32px;max-width:160px;width:auto;object-fit:contain;z-index:20;pointer-events:none;\" \/>\n                                                \n                        <!-- Loading spinner removed -->\n                        <!-- Container for status, start button, and blur toggle - centered as ONE unit -->\n                        <div id=\"preStartControls\" style=\"position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:25;display:flex;flex-direction:column;align-items:center;gap:20px;width:90vw;max-width:400px;\">\n                            <!-- Status output -->\n                            <p id=\"statusOutput\" style=\"color:rgba(255, 255, 255, 0.5);font-weight:500;font-size:14px;text-align:center;display:block;max-width:90vw;width:auto;white-space:normal;margin:0;\"><\/p>\n                            \n                            <!-- Button container with Start button, Help button, and Match Preferences -->\n                            <div style=\"display:flex;align-items:center;gap:12px;\">\n                                <!-- Start button with pill design and video icon -->\n                                <button id=\"startChatBtn\" style=\"background:var(--button-color);color:#fff;border:none;border-radius:50px;padding:10px 28px 10px 12px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;margin:0;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:all 0.3s ease;white-space:nowrap;\">\n                                    <!-- Stacked avatar cluster -->\n                                    <div id=\"startBtnAvatars\" style=\"display:flex;flex-shrink:0;margin-left:2px;\">\n                                        <img class=\"start-btn-ava\" style=\"width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--button-color);position:relative;z-index:4;\" \/>\n                                        <img class=\"start-btn-ava\" style=\"width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--button-color);margin-left:-10px;position:relative;z-index:3;\" \/>\n                                        <img class=\"start-btn-ava\" style=\"width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--button-color);margin-left:-10px;position:relative;z-index:2;\" \/>\n                                        <img class=\"start-btn-ava\" style=\"width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--button-color);margin-left:-10px;position:relative;z-index:1;\" \/>\n                                    <\/div>\n                                    <span>Start Video Chat<\/span>\n                                <\/button>\n                                \n\n\n                                \n                                <!-- Match Preferences button (always visible for all users) -->\n                                <div style=\"position:relative;flex-shrink:0;\">\n                                    <button id=\"matchPreferencesBtn\" onclick=\"openMatchPreferencesDrawer()\" style=\"background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);color:#fff;border:2px solid rgba(255,255,255,0.3);border-radius:50%;width:48px;height:48px;font-size:24px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0;box-shadow:0 4px 12px rgba(0,0,0,0.2);transition:all 0.3s ease;\" title=\"Match Preferences\">\n                                        <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\" style=\"width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:none!important;\"><line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"\/><circle cx=\"15\" cy=\"6\" r=\"2.5\" fill=\"#fff\"\/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"\/><circle cx=\"9\" cy=\"12\" r=\"2.5\" fill=\"#fff\"\/><line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"\/><circle cx=\"14\" cy=\"18\" r=\"2.5\" fill=\"#fff\"\/><\/svg>\n                                    <\/button>\n                                    <span id=\"filterTryMePill\" style=\"position:absolute;top:-10px;right:-14px;background:#F59E0B;color:#000;font-size:8px;font-weight:800;padding:3px 7px;border-radius:8px;pointer-events:none;white-space:nowrap;letter-spacing:0.4px;box-shadow:0 2px 8px rgba(245,158,11,0.4);\">TRY ME<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Gender Picker Overlay - Two-Step Flow -->\n                        <div id=\"genderPickerContainer\" style=\"position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;display:none;flex-direction:column;align-items:center;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);padding:28px 24px 24px;border-radius:12px;width:90vw;max-width:360px;\">\n\n                            <!-- Close button (visible on mobile only via CSS) -->\n                            <button id=\"genderPickerClose\" style=\"display:none;position:absolute;top:16px;right:16px;background:rgba(255,255,255,0.12);border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;transition:background 0.2s;padding:0;line-height:0;\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:block;margin:auto;\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n                            <\/button>\n\n                            <!-- Step Indicator -->\n                            <div style=\"display:flex;align-items:center;gap:0;margin-bottom:24px;justify-content:center;\">\n                                <div style=\"display:flex;flex-direction:column;align-items:center;gap:4px;\">\n                                    <div id=\"stepCircle1\" style=\"width:32px;height:32px;border-radius:50%;background:#fff;color:#000;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);\">1<\/div>\n                                    <span id=\"stepLabel1\" style=\"color:#fff;font-size:12px;font-weight:600;transition:color 0.3s cubic-bezier(0.4,0,0.2,1);\">I am<\/span>\n                                <\/div>\n                                <div id=\"stepConnector\" style=\"width:52px;height:2px;background:rgba(255,255,255,0.25);margin:0 10px;margin-bottom:20px;transition:background 0.3s cubic-bezier(0.4,0,0.2,1);\"><\/div>\n                                <div style=\"display:flex;flex-direction:column;align-items:center;gap:4px;\">\n                                    <div id=\"stepCircle2\" style=\"width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.4);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);\">2<\/div>\n                                    <span id=\"stepLabel2\" style=\"color:rgba(255,255,255,0.4);font-size:12px;font-weight:600;transition:color 0.3s cubic-bezier(0.4,0,0.2,1);\">I want to meet<\/span>\n                                <\/div>\n                            <\/div>\n\n                            <!-- STEP 1: I am a... -->\n                            <div id=\"genderStep1\" style=\"display:flex;flex-direction:column;align-items:center;width:100%;\">\n                                <span style=\"color:#fff;font-size:20px;font-weight:700;text-align:center;margin-bottom:6px;\">I am a...<\/span>\n                                <span style=\"color:rgba(255,255,255,0.6);font-size:14px;text-align:center;margin-bottom:20px;\">This will be shown to people you chat with<\/span>\n                                <div style=\"display:flex;gap:14px;\">\n                                    <button id=\"genderMale\" class=\"gender-btn\" data-gender=\"male\" style=\"background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.15);border-radius:12px;padding:18px 22px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:110px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);\">\n                                        <div style=\"width:52px;height:52px;border-radius:50%;background:rgba(59,130,246,0.2);display:flex;align-items:center;justify-content:center;\">\n                                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#60A5FA\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><\/svg>\n                                        <\/div>\n                                        <span style=\"color:#D1D5DB;font-size:15px;font-weight:600;transition:color 0.2s;\">Male<\/span>\n                                    <\/button>\n                                    <button id=\"genderFemale\" class=\"gender-btn\" data-gender=\"female\" style=\"background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.15);border-radius:12px;padding:18px 22px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:110px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);\">\n                                        <div style=\"width:52px;height:52px;border-radius:50%;background:rgba(236,72,153,0.2);display:flex;align-items:center;justify-content:center;\">\n                                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F472B6\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><\/svg>\n                                        <\/div>\n                                        <span style=\"color:#D1D5DB;font-size:15px;font-weight:600;transition:color 0.2s;\">Female<\/span>\n                                    <\/button>\n                                <\/div>\n                            <\/div>\n\n                            <!-- STEP 2: I want to chat with... (hidden initially) -->\n                            <div id=\"genderStep2\" style=\"display:none;flex-direction:column;align-items:center;width:100%;\">\n                                <span style=\"color:#fff;font-size:20px;font-weight:700;text-align:center;margin-bottom:6px;\">I want to chat with...<\/span>\n                                <span style=\"color:rgba(255,255,255,0.6);font-size:14px;text-align:center;margin-bottom:20px;\">Choose who you&#039;d like to be matched with<\/span>\n                                <div style=\"display:flex;flex-direction:column;gap:10px;width:100%;\">\n                                    <!-- Everyone (free, selectable) -->\n                                    <button id=\"genderPrefEveryone\" data-preference=\"everyone\" style=\"background:rgba(255,255,255,0.08);border:2px solid rgba(255,255,255,0.15);border-radius:10px;padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:14px;width:100%;text-align:left;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-sizing:border-box;\">\n                                        <div style=\"width:40px;height:40px;border-radius:50%;background:rgba(168,85,247,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#C084FC\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"9\" cy=\"7\" r=\"4\"><\/circle><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"><\/path><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"><\/path><\/svg>\n                                        <\/div>\n                                        <div style=\"display:flex;flex-direction:column;flex:1;min-width:0;\">\n                                            <span style=\"color:#fff;font-size:15px;font-weight:600;\">Everyone<\/span>\n                                            <span style=\"color:rgba(255,255,255,0.55);font-size:12px;\">Match with all genders<\/span>\n                                        <\/div>\n                                        <span style=\"color:rgba(255,255,255,0.85);font-size:12px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:4px;\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"rgba(255,255,255,0.85)\" stroke=\"none\"><polygon points=\"5 3 19 12 5 21 5 3\"><\/polygon><\/svg>Start<\/span>\n                                    <\/button>\n                                    <!-- Only Guys (locked) -->\n                                    <div data-preference=\"male\" style=\"background:rgba(255,255,255,0.04);border:2px solid rgba(255,255,255,0.08);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:14px;width:100%;opacity:0.5;cursor:not-allowed;box-sizing:border-box;text-align:left;\">\n                                        <div style=\"width:40px;height:40px;border-radius:50%;background:rgba(59,130,246,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(96,165,250,0.6)\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><\/svg>\n                                        <\/div>\n                                        <div style=\"display:flex;flex-direction:column;flex:1;min-width:0;text-align:left;\">\n                                            <span style=\"color:rgba(255,255,255,0.6);font-size:15px;font-weight:600;\">Only Guys<\/span>\n                                            <span style=\"color:rgba(255,255,255,0.35);font-size:12px;\">Match with males only<\/span>\n                                        <\/div>\n                                        <span style=\"color:#FBBF24;font-size:12px;font-weight:700;white-space:nowrap;\">100 &#9889;<\/span>\n                                    <\/div>\n                                    <!-- Only Girls (locked) -->\n                                    <div data-preference=\"female\" style=\"background:rgba(255,255,255,0.04);border:2px solid rgba(255,255,255,0.08);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:14px;width:100%;opacity:0.5;cursor:not-allowed;box-sizing:border-box;text-align:left;\">\n                                        <div style=\"width:40px;height:40px;border-radius:50%;background:rgba(236,72,153,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(244,114,182,0.6)\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"><\/path><circle cx=\"12\" cy=\"7\" r=\"4\"><\/circle><\/svg>\n                                        <\/div>\n                                        <div style=\"display:flex;flex-direction:column;flex:1;min-width:0;text-align:left;\">\n                                            <span style=\"color:rgba(255,255,255,0.6);font-size:15px;font-weight:600;\">Only Girls<\/span>\n                                            <span style=\"color:rgba(255,255,255,0.35);font-size:12px;\">Match with females only<\/span>\n                                        <\/div>\n                                        <span style=\"color:#FBBF24;font-size:12px;font-weight:700;white-space:nowrap;\">100 &#9889;<\/span>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n                        <\/div>\n                        \n                        <video id=\"remoteVideo\" autoplay playsinline muted><\/video>\n                        \n                        <!-- Remote User Info Pill (top left) -->\n                        \n<!-- Remote User Info Pill (top left of remote video) -->\n<div id=\"remoteUserInfoPill\" class=\"user-info\" style=\"\n    position: absolute;\n    top: 12px;\n    left: 12px;\n    z-index: 102;\n    display: none;\n    background: rgba(0, 0, 0, 0.55);\n    backdrop-filter: blur(20px);\n    border-radius: 14px;\n    padding: 8px 14px 8px 8px;\n    align-items: center;\n    gap: 10px;\n    max-width: calc(100% - 180px);\n    transition: all 0.3s ease;\n    cursor: pointer;\n\" onclick=\"openRemoteUserProfile()\" title=\"View Profile\">\n\n    <!-- Country Flag with background -->\n    <div id=\"remoteUserAvatar\" class=\"user-avatar\" style=\"\n        width: 38px;\n        height: 38px;\n        border-radius: 8px;\n        background: rgba(255, 255, 255, 0.1);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 24px;\n        flex-shrink: 0;\n        line-height: 1;\n    \">\ud83c\udf0d<\/div>\n\n    <!-- User Details -->\n    <div class=\"user-details\" style=\"\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        min-width: 0;\n        overflow: hidden;\n    \">\n        <!-- Username with badges -->\n        <div style=\"display: flex; align-items: center; gap: 4px; min-width: 0;\">\n            <div id=\"remoteUserName\" class=\"user-name\" style=\"\n                font-size: 14px;\n                font-weight: 600;\n                color: white;\n                letter-spacing: -0.2px;\n                display: flex;\n                align-items: center;\n                gap: 4px;\n                min-width: 0;\n                max-width: 100%;\n                text-align: left;\n            \">\n                <span id=\"remoteUserNameText\" style=\"\n                    min-width: 0;\n                    flex: 1 1 auto;\n                    white-space: nowrap;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    display: block;\n                \">Stranger<\/span>\n                <span id=\"remoteUserBadges\" style=\"\n                    display: inline-flex;\n                    align-items: center;\n                    gap: 4px;\n                    flex-shrink: 0;\n                    transform: translateY(1px);\n                \"><\/span>\n            <\/div>\n            <!-- Arrow icon (only visible for logged-in users) -->\n            <svg id=\"remoteUserArrow\" class=\"profile-arrow\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display: none; color: rgba(255,255,255,0.7); flex-shrink: 0; transition: transform 0.2s ease; transform: translateY(1px);\">\n                <polyline points=\"9 18 15 12 9 6\"><\/polyline>\n            <\/svg>\n        <\/div>\n\n        <!-- Location (Gender + Country Name) -->\n        <div class=\"user-location\" style=\"\n            font-size: 12px;\n            font-weight: 500;\n            color: rgba(255, 255, 255, 0.5);\n            display: flex;\n            align-items: center;\n            gap: 0;\n            white-space: nowrap;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        \">\n            <!-- Gender Text (admin\/reveal-pass only) -->\n            <span id=\"remoteUserGender\" style=\"display: none; font-weight: 600; line-height: 1;\"><\/span>\n\n            <!-- Country Name -->\n            <span id=\"remoteUserFlag\" style=\"display: none; font-size: 12px; line-height: 1;\"><\/span>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Rounded rectangle card style *\/\n.user-info {\n    position: relative;\n    overflow: visible;\n}\n\n\n\/* Username underline - only for logged-in users (text only, not badges) *\/\n.user-info.has-profile #remoteUserNameText {\n    text-decoration: underline;\n    text-decoration-color: rgba(255, 255, 255, 0.4);\n    text-underline-offset: 2px;\n    text-decoration-thickness: 1px;\n}\n\n\/* Arrow visibility for logged-in users *\/\n.user-info.has-profile .profile-arrow {\n    display: block !important;\n}\n\n\n\/* Gender\/country spacing - add gap via margin when gender is visible *\/\n#remoteUserGender[style*=\"display: inline\"] + #remoteUserFlag,\n#remoteUserGender[style*=\"display:inline\"] + #remoteUserFlag {\n    margin-left: 6px;\n}\n\n\/* Hover effects *\/\n.user-info:hover {\n    background: rgba(0, 0, 0, 0.7) !important;\n    transform: scale(1.02);\n}\n\n.user-info:hover .profile-arrow {\n    transform: translateX(2px) translateY(1px);\n    color: rgba(255, 255, 255, 1) !important;\n}\n\n.user-info:hover #remoteUserNameText {\n    text-decoration-color: rgba(255, 255, 255, 0.8) !important;\n}\n\n\/* Mobile responsive *\/\n@media (max-width: 900px) {\n    .user-info {\n        padding: 4px;\n        gap: 6px;\n        border-radius: 10px !important;\n        max-width: calc(100% - 160px);\n    }\n\n    .user-avatar {\n        width: 28px !important;\n        height: 28px !important;\n        font-size: 18px !important;\n        border-radius: 6px !important;\n    }\n\n    .user-details {\n        gap: 0px !important;\n    }\n\n    .user-name {\n        font-size: 12px !important;\n    }\n\n    .user-location {\n        font-size: 10px !important;\n    }\n\n    #remoteUserFlag {\n        font-size: 10px !important;\n    }\n\n    #remoteUserGender {\n        font-size: 10px !important;\n    }\n\n    .profile-arrow {\n        width: 10px !important;\n        height: 10px !important;\n    }\n}\n\n@media (max-width: 600px) {\n    .user-info {\n        top: 8px !important;\n        left: 8px !important;\n        max-width: calc(100% - 140px);\n    }\n}\n<\/style>\n\n<script>\n(function() {\n    function normalizeUsernameForPill(value) {\n        if (typeof value !== 'string') return '';\n        return value.trim();\n    }\n\n    function isRealProfileUsername(value) {\n        const normalized = normalizeUsernameForPill(value);\n        if (!normalized) return false;\n        return normalized.toLowerCase() !== 'stranger';\n    }\n\n    \/\/ Country code to country name lookup using the existing #countryFilter select\n    \/\/ On mobile (<=900px) shows compact two-letter code, on desktop shows full name\n    window.countryCodeToName = function(code) {\n        if (!code || code.length !== 2) return '';\n        if (window.innerWidth <= 900) return code.toUpperCase();\n        const select = document.getElementById('countryFilter');\n        if (select) {\n            const option = select.querySelector('option[value=\"' + code.toUpperCase() + '\"]');\n            if (option) {\n                const text = option.textContent.trim();\n                const spaceIdx = text.indexOf(' ');\n                return spaceIdx > 0 ? text.substring(spaceIdx + 1) : text;\n            }\n        }\n        return code.toUpperCase();\n    };\n\n    \/\/ Toggle has-profile class for logged-in user styling (underline, arrow)\n    window.updateRemoteUserPillState = function(username) {\n        const pill = document.getElementById('remoteUserInfoPill');\n        if (!pill) return;\n\n        if (isRealProfileUsername(username)) {\n            pill.classList.add('has-profile');\n        } else {\n            pill.classList.remove('has-profile');\n        }\n    };\n})();\n<\/script>\n                        \n                        <!-- Top right container: Settings button and Report button -->\n                        <div class=\"remote-video-report\" style=\"position:absolute;top:10px;right:10px;z-index:102;display:flex;gap:8px;align-items:flex-start;\">\n                            \n                            <!-- Report Button -->\n                            <button id=\"reportBtn\" class=\"icon-btn report\" title=\"Report User\" style=\"display:none;\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n                                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 3v1.5M3 21v-6m0 0 2.77-.693a9 9 0 0 1 6.208.682l.108.054a9 9 0 0 0 6.086.71l3.114-.732a48.524 48.524 0 0 1-.005-10.499l-3.11.732a9 9 0 0 1-6.085-.711l-.108-.054a9 9 0 0 0-6.208-.682L3 4.5M3 15V4.5\"><\/path>\n                                <\/svg>\n                            <\/button>\n                            <!-- User Avatar (moved to the right, last in flex container) -->\n                            \n<!-- User Avatar Component with Dropdown Menu -->\n<!-- Login Button for Non-Logged-In Users -->\n<button\n    class=\"icon-btn user-avatar-btn\"\n    onclick=\"openMeetgleLoginModal()\"\n    title=\"Login\"\n    style=\"padding: 3px; overflow: hidden;\">\n    <img decoding=\"async\"\n        src=\"https:\/\/chatimeet.com\/wp-content\/plugins\/meetgle-plugin-v2%202\/includes\/..\/public\/img\/avatar.jpg\"\n        alt=\"Avatar\"\n        style=\"width: 30px; height: 30px; max-width: 30px; max-height: 30px; border-radius: 50%; object-fit: cover; pointer-events: none; display: block;\"\n    >\n<\/button>\n                        <\/div>\n                        \n                        <!-- Bottom bar: Extra button -->\n                                                                        <div class=\"meetgle-extra-btn-wrap\" style=\"position:absolute;bottom:0;left:0;right:0;z-index:101;\">\n                            <a href=\"https:\/\/chatimeet.com\/goto\/nsfw\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"meetgle-extra-btn\" style=\"--extra-btn-accent:#FEAF25;\">\n                                <span class=\"extra-btn-left\">\n                                    <span class=\"extra-btn-avatars\">\n                                        <img class=\"extra-btn-ava\" style=\"z-index:3;border:2px solid #FEAF25;\" \/>\n                                        <img class=\"extra-btn-ava\" style=\"z-index:2;margin-left:-10px;border:2px solid #FEAF25;\" \/>\n                                        <img class=\"extra-btn-ava\" style=\"z-index:1;margin-left:-10px;border:2px solid #FEAF25;\" \/>\n                                    <\/span>\n                                    <span class=\"extra-btn-text\">Only Girls<\/span>\n                                <\/span>\n                                <span class=\"extra-btn-cta\">Try it now \u2192<\/span>\n                            <\/a>\n                        <\/div>\n                                            <\/div>\n                <\/div>\n                <!-- Right: Top half local video, bottom half chat\/controls -->\n                <div class=\"controls-and-chat\">\n                    <div class=\"video-wrapper local-video\">\n                        <!-- Profile gallery background (only visible before starting chat) -->\n                        <div class=\"live-counter-background\">\n                            <div id=\"profile-showcase\"><\/div>\n                        <\/div>\n                        \n                        <video id=\"localVideo\" autoplay playsinline muted><\/video>\n                        \n                        <!-- Top controls: Leaderboard (left) and Spark Balance (right) -->\n                        <div class=\"top-controls\">\n                            <!-- Left side: Leaderboard + History + Streak buttons -->\n                            <div style=\"display: flex; gap: 8px; align-items: center;\">\n                                <!-- Leaderboard Button -->\n                                <button id=\"leaderboardDisplay\" class=\"icon-btn leaderboard-btn\" onclick=\"openLeaderboardModal()\" title=\"View Top Earners This Week\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 18h-9M12 18v-3m0 0a4.5 4.5 0 0 0 4.5-4.5V6a.75.75 0 0 0-.75-.75H8.25A.75.75 0 0 0 7.5 6v4.5A4.5 4.5 0 0 0 12 15Zm-6-9V4.5a.75.75 0 0 0-.75-.75H3a.75.75 0 0 0-.75.75V7.5A2.25 2.25 0 0 0 4.5 9.75H6Zm12 0V4.5a.75.75 0 0 1 .75-.75H21a.75.75 0 0 1 .75.75V7.5a2.25 2.25 0 0 1-2.25 2.25H18ZM9 21h6\" \/>\n                                    <\/svg>\n                                <\/button>\n\n                                <!-- Chat History Button (shown for all users) -->\n                                <button id=\"chatHistoryBtn\" class=\"icon-btn history-btn\" onclick=\"openChatHistoryModal()\" title=\"View Your Chat History\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" \/>\n                                    <\/svg>\n                                <\/button>\n                                \n                                                            <\/div>\n                            \n                            <!-- Right side: Shop Button + Spark Balance -->\n                            <div style=\"display: flex; gap: 8px; align-items: center;\">\n                                <!-- Spark Store Button -->\n                                <button id=\"sparkStoreBtn\" class=\"icon-btn spark-store-btn\" onclick=\"openSparkStoreModal()\" title=\"Spark Store\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 11.25v8.25a1.5 1.5 0 0 1-1.5 1.5H4.5A1.5 1.5 0 0 1 3 19.5v-8.25M12 4.875A2.625 2.625 0 1 0 9.375 7.5H12m0-2.625V7.5m0-2.625A2.625 2.625 0 1 1 14.625 7.5H12m0 0V21m-8.625-9.75h18c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125h-18C2.504 7.5 2 8.004 2 8.625v1.5c0 .621.504 1.125 1.125 1.125Z\" \/>\n                                    <\/svg>\n                                <\/button>\n                                \n                                <!-- Spark Balance Display -->\n                                <button id=\"sparkBalanceDisplay\" class=\"icon-btn spark-balance-btn\" onclick=\"openSparkInfoModal()\" title=\"Login to start earning Sparks!\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" style=\"flex-shrink:0;\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\" \/>\n                                    <\/svg>\n                                                                    <\/button>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Bottom center controls -->\n                        <div class=\"bottom-controls\" style=\"display:none;\">\n                            <!-- Settings -->\n                            <div class=\"settings-wrap\">\n                                <button id=\"settingsBtn\" class=\"ctrl-btn btn-settings\" title=\"Settings\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\">\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z\"\/>\n                                        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\/>\n                                    <\/svg>\n                                    <span class=\"indicator\" id=\"settingsIndicator\"><\/span>\n                                <\/button>\n\n                                <!-- Settings Popover -->\n                                <div id=\"settingsPopover\" class=\"settings-popover\">\n                                    <!-- Blur toggle row -->\n                                    <div class=\"setting-row\" id=\"blurToggleRow\">\n                                        <div class=\"left\">\n                                            <div class=\"icon-circle\">\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3.98 8.223A10.477 10.477 0 0 0 1.934 12c1.292 4.338 5.31 7.5 10.066 7.5.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88\"\/><\/svg>\n                                            <\/div>\n                                            <div>\n                                                <div class=\"label\">Blur new matches<\/div>\n                                                <div class=\"sublabel\">5 second delay<\/div>\n                                            <\/div>\n                                        <\/div>\n                                        <div id=\"blurToggleMenu\" class=\"ctrl-checkbox\">\n                                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"3\" stroke=\"currentColor\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n                                        <\/div>\n                                    <\/div>\n\n                                    <!-- Mic toggle row -->\n                                    <div class=\"setting-row\" id=\"micToggleRow\">\n                                        <div class=\"left\">\n                                            <div class=\"icon-circle\">\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 18.75a6 6 0 0 0 6-6v-1.5m-6 7.5a6 6 0 0 1-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 0 1-3-3V4.5a3 3 0 1 1 6 0v8.25a3 3 0 0 1-3 3Z\"\/><\/svg>\n                                            <\/div>\n                                            <div>\n                                                <div class=\"label\">Microphone<\/div>\n                                                <div class=\"sublabel\" id=\"micStatusLabel\">On<\/div>\n                                            <\/div>\n                                        <\/div>\n                                        <div id=\"muteBtnMenu\" class=\"ctrl-toggle on\"><\/div>\n                                    <\/div>\n\n                                    <!-- Switch camera row -->\n                                    <div class=\"setting-row\" id=\"switchCameraRow\">\n                                        <div class=\"left\">\n                                            <div class=\"icon-circle\">\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z\"\/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z\"\/><\/svg>\n                                            <\/div>\n                                            <div>\n                                                <div class=\"label\">Switch Camera<\/div>\n                                            <\/div>\n                                        <\/div>\n                                        <svg id=\"switchCameraBtnMenu\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\" style=\"width:16px;height:16px;color:rgba(255,255,255,0.3);flex-shrink:0;\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m8.25 4.5 7.5 7.5-7.5 7.5\"\/><\/svg>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Heart -->\n                            <button id=\"heartBtn\" class=\"ctrl-btn btn-heart\" title=\"Like\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z\"\/><\/svg>\n                            <\/button>\n\n                            <!-- Stop -->\n                            <button id=\"stopChatBtn\" class=\"ctrl-btn btn-stop\" title=\"Stop Chat\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z\" clip-rule=\"evenodd\"\/><\/svg>\n                            <\/button>\n\n                            <!-- Next -->\n                            <button id=\"nextChatBtn\" class=\"ctrl-btn btn-next\" title=\"Next Person\">\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M5.055 7.06C3.805 6.347 2.25 7.25 2.25 8.69v8.122c0 1.44 1.555 2.343 2.805 1.628L12 14.471v2.34c0 1.44 1.555 2.343 2.805 1.628l7.108-4.061c1.26-.72 1.26-2.536 0-3.256l-7.108-4.061C13.555 6.346 12 7.249 12 8.689v2.34L5.055 7.061Z\"\/><\/svg>\n                            <\/button>\n\n                            <!-- Spark -->\n                            <div class=\"spark-wrap\">\n                                <button id=\"sparkBtn\" class=\"ctrl-btn btn-spark\" title=\"Send Sparks\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z\" clip-rule=\"evenodd\"\/><\/svg>\n                                <\/button>\n\n                                <!-- Spark Amount Popup -->\n                                <div id=\"sparkPopup\" class=\"spark-popup\">\n                                    <button class=\"sp-opt\" data-amount=\"5\">\u26a1 5<\/button>\n                                    <button class=\"sp-opt\" data-amount=\"10\">\u26a1 10<\/button>\n                                    <button class=\"sp-opt\" data-amount=\"25\">\u26a1 25<\/button>\n                                    <button class=\"sp-opt\" data-amount=\"50\">\u26a1 50<\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Insufficient Sparks Toast -->\n                        <div id=\"insufficientSparksToast\" style=\"display:none;position:absolute;bottom:100px;left:50%;transform:translateX(-50%);background:rgba(239,68,68,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;padding:10px 20px;border-radius:50px;font-size:14px;font-weight:600;z-index:300;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,0.4);pointer-events:none;opacity:0;transition:opacity 0.3s ease;\">\n                            Not enough sparks!                        <\/div>\n                        \n                        <div class=\"heart-anim-overlay\" id=\"heartAnimOverlay\" style=\"pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Spark Info Modal -->\n        <!-- Buy Sparks Modal -->\n<div id=\"sparkInfoModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content spark-info-modal-content\" style=\"max-width:700px;margin:0;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 24px 0 24px;display:flex;align-items:center;justify-content:space-between;\">\n            <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Buy Sparks<\/h2>\n            <button onclick=\"closeSparkInfoModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n        <\/div>\n\n        <!-- Content -->\n        <div style=\"padding:16px 24px 24px 24px;overflow-y:auto;\">\n\n                        <!-- Login Notice -->\n            <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px;\">\n                <div style=\"font-size:16px;\">\ud83d\udd12<\/div>\n                <div style=\"flex:1;min-width:0;\">\n                    <div style=\"color:white;font-weight:600;font-size:13px;\">Login Required<\/div>\n                    <div style=\"color:rgba(255,255,255,0.4);font-size:11px;\">Create a free account to purchase items<\/div>\n                <\/div>\n                <a href=\"\/register\" style=\"background:#F59E0B;color:#000;padding:6px 14px;border-radius:16px;text-decoration:none;font-weight:600;font-size:12px;white-space:nowrap;flex-shrink:0;\">Sign Up<\/a>\n            <\/div>\n            \n                        <!-- No packages available -->\n            <div style=\"text-align:center;padding:40px 0;\">\n                <div style=\"font-size:32px;margin-bottom:12px;\">\u26a1<\/div>\n                <div style=\"color:rgba(255,255,255,0.5);font-size:14px;\">Spark Bundles Coming Soon<\/div>\n                <div style=\"color:rgba(255,255,255,0.3);font-size:12px;margin-top:6px;\">Get more sparks at discounted rates<\/div>\n            <\/div>\n            \n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Purchase Confirmation Modal (for spark packages) -->\n<div id=\"sparkInfoPurchaseConfirmModal\" class=\"meetgle-modal\" style=\"display:none;z-index:999999;\">\n    <div class=\"meetgle-modal-content\" style=\"max-width:400px;background:#1F2937;text-align:center;\">\n        <div style=\"padding:24px;\">\n            <div id=\"sparkInfoPurchaseIcon\" style=\"font-size:48px;margin-bottom:16px;\">\ud83d\udcb0<\/div>\n            <h3 id=\"sparkInfoPurchaseTitle\" style=\"color:white;margin:0 0 8px 0;font-size:20px;font-weight:600;\">Confirm Purchase<\/h3>\n            <p id=\"sparkInfoPurchaseMessage\" style=\"color:#9CA3AF;margin:0 0 24px 0;font-size:14px;\"><\/p>\n\n            <div style=\"display:flex;gap:12px;justify-content:center;\">\n                <button onclick=\"closeSparkInfoPurchaseConfirm()\" style=\"background:#374151;color:white;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;\">\n                    Cancel                <\/button>\n                <button id=\"sparkInfoPurchaseBtn\" onclick=\"confirmSparkInfoPurchase()\" style=\"background:linear-gradient(135deg, #10B981 0%, #059669 100%);color:white;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;\">\n                    Buy Now                <\/button>\n            <\/div>\n\n            <!-- Crypto payment note -->\n            <div id=\"sparkInfoCryptoNote\" style=\"margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.1);\">\n                <p style=\"color:#9CA3AF;font-size:12px;margin:0;\">\n                    \ud83d\udc8e Pay with Crypto (BTC, ETH, USDT, and 200+ coins)                <\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n.spark-info-modal-content {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.spark-info-modal-content::-webkit-scrollbar {\n    display: none;\n}\n.spark-info-package-item:hover {\n    background: rgba(255,255,255,0.08) !important;\n    border-color: rgba(255,255,255,0.15) !important;\n    transform: translateY(-2px);\n}\n.spark-info-package-item:active {\n    transform: translateY(0);\n}\n@media (max-width: 900px) {\n    #sparkInfoModal { padding: 0 !important; }\n    #sparkInfoModal > .spark-info-modal-content {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        height: 100vh !important;\n        height: 100svh !important;\n        max-height: 100vh !important;\n        max-height: 100svh !important;\n        border-radius: 0 !important;\n    }\n    .spark-info-packages-grid {\n        grid-template-columns: repeat(2, 1fr) !important;\n    }\n}\n<\/style>\n\n<script>\n(function() {\n    \/\/ Package data from PHP\n    const sparkInfoPackages = [];\n\n    let sparkInfoPendingPackage = null;\n    let sparkInfoPurchaseInProgress = false;\n\n    window.openSparkInfoModal = function() {\n        document.getElementById('sparkInfoModal').style.display = 'flex';\n    };\n\n    window.closeSparkInfoModal = function() {\n        document.getElementById('sparkInfoModal').style.display = 'none';\n    };\n\n    window.handleSparkInfoPackagePurchase = function(packageId) {\n        if (typeof ANONCAM_DATA === 'undefined' || !ANONCAM_DATA.isUserLoggedIn) {\n            alert(ANONCAM_DATA.lang.js_store_login_sparks || 'Please log in to purchase sparks.');\n            return;\n        }\n\n        const pkg = sparkInfoPackages.find(p => p.id === packageId);\n        if (!pkg) return;\n\n        sparkInfoPendingPackage = pkg;\n\n        document.getElementById('sparkInfoPurchaseIcon').textContent = '\ud83d\udcb0';\n        document.getElementById('sparkInfoPurchaseTitle').textContent = (ANONCAM_DATA.lang.js_store_buy_sparks_title || 'Buy Sparks');\n        document.getElementById('sparkInfoPurchaseMessage').innerHTML = `\n            Purchase <strong>${pkg.name}<\/strong> for <strong>$${parseFloat(pkg.price).toFixed(2)}<\/strong>?<br>\n            <span style=\"font-size:14px;color:#10B981;font-weight:600;\">${(ANONCAM_DATA.lang.js_store_receive_sparks || \"You'll receive \u26a1 {sparks} Sparks\").replace('{sparks}', parseInt(pkg.sparks).toLocaleString())}<\/span>\n            ${pkg.bonus > 0 ? `<br><span style=\"font-size:12px;color:#6B7280;\">${(ANONCAM_DATA.lang.js_store_includes_bonus || '(includes +{bonus}% bonus)').replace('{bonus}', pkg.bonus)}<\/span>` : ''}\n        `;\n\n        const btn = document.getElementById('sparkInfoPurchaseBtn');\n        btn.textContent = (ANONCAM_DATA.lang.js_store_pay_amount || 'Pay ${amount}').replace('{amount}', parseFloat(pkg.price).toFixed(2));\n        btn.disabled = false;\n        btn.style.opacity = '1';\n        btn.style.pointerEvents = 'auto';\n\n        document.getElementById('sparkInfoPurchaseConfirmModal').style.display = 'flex';\n    };\n\n    window.closeSparkInfoPurchaseConfirm = function() {\n        document.getElementById('sparkInfoPurchaseConfirmModal').style.display = 'none';\n        sparkInfoPendingPackage = null;\n        sparkInfoPurchaseInProgress = false;\n    };\n\n    window.confirmSparkInfoPurchase = function() {\n        if (!sparkInfoPendingPackage || sparkInfoPurchaseInProgress) return;\n        sparkInfoPurchaseInProgress = true;\n\n        const btn = document.getElementById('sparkInfoPurchaseBtn');\n        btn.disabled = true;\n        btn.textContent = (ANONCAM_DATA.lang.js_store_processing_btn || 'Processing...');\n        btn.style.opacity = '0.6';\n        btn.style.pointerEvents = 'none';\n\n        fetch(ANONCAM_DATA.ajax_url, {\n            method: 'POST',\n            headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n            body: new URLSearchParams({\n                action: 'meetgle_create_payment',\n                nonce: ANONCAM_DATA.payment_nonce || ANONCAM_DATA.store_purchase_nonce,\n                package_id: sparkInfoPendingPackage.id\n            })\n        })\n        .then(res => res.json())\n        .then(response => {\n            if (response.success && response.data.redirect_url) {\n                window.location.href = response.data.redirect_url;\n            } else {\n                document.getElementById('sparkInfoPurchaseIcon').textContent = '\u274c';\n                document.getElementById('sparkInfoPurchaseTitle').textContent = (ANONCAM_DATA.lang.js_store_error || 'Error');\n                document.getElementById('sparkInfoPurchaseMessage').innerHTML = response.data?.error || (ANONCAM_DATA.lang.js_store_payment_failed || 'Failed to create payment. Please try again.');\n                setTimeout(() => { resetSparkInfoPurchaseBtn(); }, 1000);\n            }\n        })\n        .catch(() => {\n            document.getElementById('sparkInfoPurchaseIcon').textContent = '\u274c';\n            document.getElementById('sparkInfoPurchaseTitle').textContent = (ANONCAM_DATA.lang.js_store_error || 'Error');\n            document.getElementById('sparkInfoPurchaseMessage').innerHTML = (ANONCAM_DATA.lang.js_store_connection_error || 'Connection error. Please try again.');\n            setTimeout(() => { resetSparkInfoPurchaseBtn(); }, 1000);\n        });\n    };\n\n    function resetSparkInfoPurchaseBtn() {\n        const btn = document.getElementById('sparkInfoPurchaseBtn');\n        btn.disabled = false;\n        btn.textContent = (ANONCAM_DATA.lang.js_store_buy_now || 'Buy Now');\n        btn.style.opacity = '1';\n        btn.style.pointerEvents = 'auto';\n        sparkInfoPurchaseInProgress = false;\n    }\n\n    \/\/ Close modal on backdrop click\n    document.getElementById('sparkInfoModal').addEventListener('click', function(e) {\n        if (e.target === this) closeSparkInfoModal();\n    });\n    document.getElementById('sparkInfoPurchaseConfirmModal').addEventListener('click', function(e) {\n        if (e.target === this) closeSparkInfoPurchaseConfirm();\n    });\n\n    \/\/ Close on Escape key\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape') {\n            var confirm = document.getElementById('sparkInfoPurchaseConfirmModal');\n            if (confirm && confirm.style.display === 'flex') {\n                closeSparkInfoPurchaseConfirm();\n            } else if (document.getElementById('sparkInfoModal').style.display === 'flex') {\n                closeSparkInfoModal();\n            }\n        }\n    });\n})();\n<\/script>\n        \n        <!-- Spark Store Modal -->\n        <!-- Spark Store Modal -->\n<div id=\"sparkStoreModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content spark-store-modal-content\" style=\"max-width:700px;margin:0;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 20px 0 20px;\">\n            <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;\">\n                <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Spark Store<\/h2>\n                <button onclick=\"closeSparkStoreModal()\" style=\"background:rgba(255,255,255,0.08);border:none;color:rgba(255,255,255,0.5);width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.15)';this.style.color='white'\" onmouseout=\"this.style.background='rgba(255,255,255,0.08)';this.style.color='rgba(255,255,255,0.5)'\">&times;<\/button>\n            <\/div>\n\n            <!-- Balance Pill -->\n            <div style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;\">\n                <span style=\"color:rgba(255,255,255,0.45);font-size:13px;font-weight:500;\">Your balance<\/span>\n                <div style=\"display:flex;align-items:center;gap:6px;\">\n                    <span style=\"font-size:16px;\">\u26a1<\/span>\n                    <span style=\"color:white;font-weight:700;font-size:18px;\" id=\"storeSparkBalance\">0<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Content -->\n        <div style=\"padding:20px;\">\n                        <!-- Login Notice -->\n            <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px;\">\n                <div style=\"font-size:16px;\">\ud83d\udd12<\/div>\n                <div style=\"flex:1;min-width:0;\">\n                    <div style=\"color:white;font-weight:600;font-size:13px;\">Login Required<\/div>\n                    <div style=\"color:rgba(255,255,255,0.35);font-size:11px;\">Create a free account to purchase items<\/div>\n                <\/div>\n                <a href=\"\/register\" style=\"background:rgba(255,255,255,0.08);color:white;padding:6px 14px;border-radius:10px;text-decoration:none;font-weight:600;font-size:12px;border:1px solid rgba(255,255,255,0.12);transition:all 0.2s;white-space:nowrap;flex-shrink:0;\" onmouseover=\"this.style.background='rgba(255,255,255,0.12)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.08)'\">Sign Up<\/a>\n            <\/div>\n                        \n            <!-- CHAT UPGRADES Section -->\n            <div style=\"margin-bottom:20px;\">\n                <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:12px;\">\n                    <div style=\"width:6px;height:6px;border-radius:50%;background:#F59E0B;flex-shrink:0;\"><\/div>\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;\">CHAT UPGRADES<\/span>\n                <\/div>\n\n                <div class=\"spark-store-scroll-row\" style=\"display:flex;overflow-x:auto;gap:10px;padding-top:10px;padding-bottom:4px;\">\n\n                    <!-- Match Filters Card -->\n                    <div id=\"storeItem_match_filters\" class=\"store-item\" data-item-type=\"match_filters\" data-price=\"100\" onclick=\"handleStorePurchase('match_filters', 100)\" style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;cursor:pointer;transition:all 0.2s;position:relative;width:170px;min-width:170px;flex-shrink:0;display:flex;flex-direction:column;\">\n                        \n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;\">\n                            <div style=\"width:32px;height:32px;background:rgba(255,215,0,0.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;\">\ud83c\udfaf<\/div>\n                            <span style=\"color:#F59E0B;font-weight:700;font-size:13px;\">100 \u26a1<\/span>\n                        <\/div>\n                        <div style=\"color:white;font-size:14px;font-weight:700;margin-bottom:4px;\">Match Filters<\/div>\n                        <div style=\"color:rgba(255,255,255,0.4);font-size:11px;line-height:1.4;margin-bottom:12px;\">Filter matches by gender and country<\/div>\n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-top:auto;\">\n                                                        <span style=\"color:rgba(255,255,255,0.35);font-size:11px;\">24 hours<\/span>\n                                                        <span style=\"background:rgba(255,255,255,0.08);color:white;padding:6px 16px;border-radius:16px;font-size:12px;font-weight:600;\">Buy<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Reveal Gender Card -->\n                    <div id=\"storeItem_reveal_gender\" class=\"store-item\" data-item-type=\"reveal_gender\" data-price=\"50\" onclick=\"handleStorePurchase('reveal_gender', 50)\" style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;cursor:pointer;transition:all 0.2s;position:relative;width:170px;min-width:170px;flex-shrink:0;display:flex;flex-direction:column;\">\n                        \n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;\">\n                            <div style=\"width:32px;height:32px;background:rgba(236,72,153,0.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;\">\ud83d\udc64<\/div>\n                            <span style=\"color:#F59E0B;font-weight:700;font-size:13px;\">50 \u26a1<\/span>\n                        <\/div>\n                        <div style=\"color:white;font-size:14px;font-weight:700;margin-bottom:4px;\">Reveal Gender<\/div>\n                        <div style=\"color:rgba(255,255,255,0.4);font-size:11px;line-height:1.4;margin-bottom:12px;\">See your match&#039;s gender<\/div>\n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-top:auto;\">\n                                                        <span style=\"color:rgba(255,255,255,0.35);font-size:11px;\">24 hours<\/span>\n                                                        <span style=\"background:rgba(255,255,255,0.08);color:white;padding:6px 16px;border-radius:16px;font-size:12px;font-weight:600;\">Buy<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Chat History Card -->\n                    <div id=\"storeItem_full_history\" class=\"store-item\" data-item-type=\"full_history\" data-price=\"100\" onclick=\"handleStorePurchase('full_history', 100)\" style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;cursor:pointer;transition:all 0.2s;position:relative;width:170px;min-width:170px;flex-shrink:0;display:flex;flex-direction:column;\">\n                                                \n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;\">\n                            <div style=\"width:32px;height:32px;background:rgba(139,92,246,0.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;\">\ud83d\udd50<\/div>\n                            <span style=\"color:#F59E0B;font-weight:700;font-size:13px;\">100 \u26a1<\/span>\n                        <\/div>\n                        <div style=\"color:white;font-size:14px;font-weight:700;margin-bottom:4px;\">Chat History<\/div>\n                        <div style=\"color:rgba(255,255,255,0.4);font-size:11px;line-height:1.4;margin-bottom:12px;\">Full unlimited history access<\/div>\n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-top:auto;\">\n                                                        <span style=\"color:rgba(255,255,255,0.35);font-size:11px;\">24 hours<\/span>\n                                                        <span style=\"background:rgba(255,255,255,0.08);color:white;padding:6px 16px;border-radius:16px;font-size:12px;font-weight:600;\">Buy<\/span>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n\n            <!-- PROFILE & STATUS Section -->\n            <div style=\"margin-bottom:20px;\">\n                <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:12px;\">\n                    <div style=\"width:6px;height:6px;border-radius:50%;background:#F59E0B;flex-shrink:0;\"><\/div>\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;\">PROFILE &amp; STATUS<\/span>\n                <\/div>\n\n                <div class=\"spark-store-scroll-row\" style=\"display:flex;overflow-x:auto;gap:10px;padding-top:10px;padding-bottom:4px;\">\n\n                    <!-- Blue Verification Card -->\n                    <div id=\"storeItem_blue_verification\" class=\"store-item\" data-item-type=\"blue_verification\" data-price=\"100\" onclick=\"handleStorePurchase('blue_verification', 100)\" style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;cursor:pointer;transition:all 0.2s;position:relative;width:170px;min-width:170px;flex-shrink:0;display:flex;flex-direction:column;\">\n                                                \n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;\">\n                            <div style=\"width:32px;height:32px;background:rgba(59,130,246,0.15);border-radius:8px;display:flex;align-items:center;justify-content:center;\">\n                                <div style=\"width:20px;height:20px;background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:11px;font-weight:bold;\">\u2713<\/div>\n                            <\/div>\n                            <span style=\"color:#F59E0B;font-weight:700;font-size:13px;\">100 \u26a1<\/span>\n                        <\/div>\n                        <div style=\"color:white;font-size:14px;font-weight:700;margin-bottom:4px;\">Blue Verification<\/div>\n                        <div style=\"color:rgba(255,255,255,0.4);font-size:11px;line-height:1.4;margin-bottom:12px;\">Verified checkmark next to your name<\/div>\n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-top:auto;\">\n                                                        <span style=\"color:rgba(255,255,255,0.35);font-size:11px;\">7 days<\/span>\n                                                        <span style=\"background:rgba(255,255,255,0.08);color:white;padding:6px 16px;border-radius:16px;font-size:12px;font-weight:600;\">Buy<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Streak Freeze Card -->\n                    <div id=\"storeItem_streak_freeze\" class=\"store-item\" data-item-type=\"streak_freeze\" data-price=\"200\" onclick=\"handleStreakFreezePurchase()\" style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;cursor:pointer;transition:all 0.2s;position:relative;width:170px;min-width:170px;flex-shrink:0;display:flex;flex-direction:column;\">\n                        \n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;\">\n                            <div style=\"width:32px;height:32px;background:rgba(59,130,246,0.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;\">\u2744\ufe0f<\/div>\n                            <span style=\"color:#F59E0B;font-weight:700;font-size:13px;\">200 \u26a1<\/span>\n                        <\/div>\n                        <div style=\"color:white;font-size:14px;font-weight:700;margin-bottom:4px;\">Streak Freeze<\/div>\n                        <div style=\"color:rgba(255,255,255,0.4);font-size:11px;line-height:1.4;margin-bottom:12px;\">Saves your streak if you miss a day<\/div>\n                        <div style=\"display:flex;justify-content:space-between;align-items:center;margin-top:auto;\">\n                            <span id=\"streakFreezeOwnedCount\" style=\"color:rgba(255,255,255,0.35);font-size:11px;\">\u2744\ufe0f 0 owned<\/span>\n                            <span style=\"background:rgba(255,255,255,0.08);color:white;padding:6px 16px;border-radius:16px;font-size:12px;font-weight:600;\">Buy<\/span>\n                        <\/div>\n                    <\/div>\n\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Purchase Confirmation Modal -->\n<div id=\"purchaseConfirmModal\" class=\"meetgle-modal\" style=\"display:none;z-index:999999;\">\n    <div class=\"meetgle-modal-content\" style=\"max-width:400px;background:#1F2937;text-align:center;\">\n        <div style=\"padding:24px;\">\n            <div id=\"purchaseConfirmIcon\" style=\"font-size:48px;margin-bottom:16px;\">\ud83c\udf81<\/div>\n            <h3 id=\"purchaseConfirmTitle\" style=\"color:white;margin:0 0 8px 0;font-size:20px;font-weight:600;\">Confirm Purchase<\/h3>\n            <p id=\"purchaseConfirmMessage\" style=\"color:#9CA3AF;margin:0 0 24px 0;font-size:14px;\"><\/p>\n            \n            <div style=\"display:flex;gap:12px;justify-content:center;\">\n                <button onclick=\"closePurchaseConfirmModal()\" style=\"background:#374151;color:white;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;\">\n                    Cancel                <\/button>\n                <button id=\"purchaseConfirmBtn\" onclick=\"confirmPurchase()\" style=\"background:var(--theme-store-price-gradient, linear-gradient(135deg, #EC4899 0%, #F472B6 100%));color:white;border:none;border-radius:8px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;\">\n                    Buy Now                <\/button>\n            <\/div>\n            \n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Hide scrollbar on spark store modal *\/\n.spark-store-modal-content {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.spark-store-modal-content::-webkit-scrollbar {\n    display: none;\n}\n\n\/* Hide scrollbar on horizontal scroll rows *\/\n.spark-store-scroll-row {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.spark-store-scroll-row::-webkit-scrollbar {\n    display: none;\n}\n\n\/* Store item hover *\/\n#sparkStoreModal .store-item {\n    transform: translateY(0);\n}\n#sparkStoreModal .store-item:hover {\n    transform: translateY(-2px);\n    background: rgba(255,255,255,0.08) !important;\n    border-color: rgba(255,255,255,0.15) !important;\n}\n#sparkStoreModal .store-item:active {\n    transform: translateY(0);\n}\n\n\/* Mobile fullscreen *\/\n@media (max-width: 900px) {\n    #sparkStoreModal {\n        padding: 0 !important;\n    }\n    #sparkStoreModal > .spark-store-modal-content {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        height: 100vh !important;\n        height: 100svh !important;\n        max-height: 100vh !important;\n        max-height: 100svh !important;\n        border-radius: 0 !important;\n    }\n}\n<\/style>\n\n<script>\n\/\/ Store state\nlet pendingPurchase = null;\nlet purchaseInProgress = false; \/\/ \u2705 NEW: Prevent double purchases\nlet canSeeGender = false;\nlet canUseFilters = false;\nlet isAdmin = false;\n\nvar _lang = (typeof ANONCAM_DATA !== 'undefined' && ANONCAM_DATA.lang) ? ANONCAM_DATA.lang : {};\n\nvar itemNames = {\n    'reveal_gender': (_lang.js_store_item_reveal_gender || 'Reveal Partner Gender'),\n    'match_filters': (_lang.js_store_item_match_filters || 'Match Filters'),\n    'full_history': (_lang.js_store_item_full_history || 'View Full History'),\n    'blue_verification': (_lang.js_store_item_blue_verification || 'Blue Verification'),\n    'streak_freeze': (_lang.js_store_item_streak_freeze || 'Streak Freeze')\n};\n\nvar itemDurations = {\n    'reveal_gender': (_lang.js_store_dur_24h || '24 hours'),\n    'match_filters': (_lang.js_store_dur_24h || '24 hours'),\n    'full_history': (_lang.js_store_dur_24h || '24 hours'),\n    'blue_verification': (_lang.js_store_dur_7d || '7 days'),\n    'streak_freeze': (_lang.js_store_dur_permanent || 'permanent (until used)')\n};\n\n\/\/ Open and close modal functions\nfunction openSparkStoreModal() {\n    document.getElementById('sparkStoreModal').style.display = 'flex';\n    \/\/ Refresh active passes status\n    checkActivePasses();\n}\n\nfunction closeSparkStoreModal() {\n    document.getElementById('sparkStoreModal').style.display = 'none';\n}\n\nfunction closePurchaseConfirmModal() {\n    document.getElementById('purchaseConfirmModal').style.display = 'none';\n    pendingPurchase = null;\n    purchaseInProgress = false;\n}\n\nfunction handleStorePurchase(itemType, price) {\n    \/\/ Check if logged in\n    if (typeof ANONCAM_DATA === 'undefined' || !ANONCAM_DATA.isUserLoggedIn) {\n        alert(ANONCAM_DATA.lang.js_store_login_purchase || 'Please log in to make purchases.');\n        return;\n    }\n\n    \/\/ \u2705 NEW: Prevent gold verification users from buying blue verification\n    if (itemType === 'blue_verification' && ANONCAM_DATA.verificationType === 'gold') {\n        alert(ANONCAM_DATA.lang.js_store_gold_better || 'You already have Gold Verification which is better than Blue!');\n        return;\n    }\n    \n    \/\/ Show confirmation modal\n    pendingPurchase = { itemType, price };\n    \n    document.getElementById('purchaseConfirmTitle').textContent = (ANONCAM_DATA.lang.js_store_confirm_title || 'Confirm Purchase');\n    document.getElementById('purchaseConfirmMessage').innerHTML = `\n        ${(ANONCAM_DATA.lang.js_store_confirm_purchase || 'Purchase {item} for {price} \u26a1?').replace('{item}', '<strong>' + itemNames[itemType] + '<\/strong>').replace('{price}', '<strong>' + price + '<\/strong>')}<br>\n        <span style=\"font-size:12px;color:#6B7280;\">${(ANONCAM_DATA.lang.js_store_pass_active || 'This pass will be active for {duration}.').replace('{duration}', itemDurations[itemType])}<\/span>\n    `;\n    \n    const confirmBtn = document.getElementById('purchaseConfirmBtn');\n    confirmBtn.textContent = (ANONCAM_DATA.lang.js_store_buy_now || 'Buy Now');\n    confirmBtn.style.background = 'var(--theme-store-price-gradient, linear-gradient(135deg, #EC4899 0%, #F472B6 100%))';\n\n    document.getElementById('purchaseConfirmModal').style.display = 'flex';\n}\n\nfunction confirmPurchase() {\n    if (!pendingPurchase) return;\n    \n    \/\/ \u2705 NEW: Prevent double purchases with a lock\n    if (purchaseInProgress) {\n        \/\/ Purchase already in progress\n        return;\n    }\n    purchaseInProgress = true;\n    \n    const confirmBtn = document.getElementById('purchaseConfirmBtn');\n    \n    \/\/ Disable button and show loading\n    confirmBtn.disabled = true;\n    confirmBtn.textContent = (ANONCAM_DATA.lang.js_store_processing_btn || 'Processing...');\n    confirmBtn.style.opacity = '0.6';\n    confirmBtn.style.pointerEvents = 'none';\n    \n    \/\/ Check if this is a streak freeze purchase\n    if (pendingPurchase.type === 'streak_freeze') {\n        fetch(ANONCAM_DATA.ajax_url, {\n            method: 'POST',\n            headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n            body: new URLSearchParams({\n                action: 'meetgle_purchase_streak_freeze',\n                nonce: ANONCAM_DATA.streak_nonce || ANONCAM_DATA.store_purchase_nonce\n            })\n        })\n        .then(res => res.json())\n        .then(response => {\n            if (response.success) {\n                \/\/ Update balance displays\n                const balanceEl = document.getElementById('storeSparkBalance');\n                if (balanceEl) {\n                    balanceEl.textContent = response.data.new_balance.toLocaleString();\n                }\n                \n                const mainBalanceEl = document.getElementById('sparkBalanceAmount');\n                if (mainBalanceEl) {\n                    mainBalanceEl.textContent = response.data.new_balance.toLocaleString();\n                }\n                \n                \/\/ Update streak freeze count in store\n                const freezeCountEl = document.getElementById('streakFreezeOwnedCount');\n                if (freezeCountEl) {\n                    freezeCountEl.textContent = `\u2744\ufe0f ${(ANONCAM_DATA.lang.js_store_owned || '{count} owned').replace('{count}', response.data.freeze_count)}`;\n                }\n                \n                \/\/ Update streak freeze badge in store\n                const storeItem = document.getElementById('storeItem_streak_freeze');\n                if (storeItem) {\n                    let badge = storeItem.querySelector('.owned-badge');\n                    if (!badge && response.data.freeze_count > 0) {\n                        badge = document.createElement('div');\n                        badge.className = 'owned-badge';\n                        badge.style.cssText = 'position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);color:white;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:600;box-shadow:0 2px 8px rgba(59,130,246,0.4);';\n                        storeItem.appendChild(badge);\n                    }\n                    if (badge) {\n                        badge.textContent = `${response.data.freeze_count} ${(ANONCAM_DATA.lang.js_store_badge_owned || 'OWNED')}`;\n                    }\n                }\n                \n                \/\/ Update streak modal freeze count if visible\n                const modalFreezeCount = document.getElementById('freezeCount');\n                if (modalFreezeCount) {\n                    modalFreezeCount.textContent = (ANONCAM_DATA.lang.js_store_owned || '{count} owned').replace('{count}', response.data.freeze_count);\n                }\n                \n                \/\/ Show success message\n                document.getElementById('purchaseConfirmIcon').textContent = '\u2705';\n                document.getElementById('purchaseConfirmTitle').textContent = (ANONCAM_DATA.lang.js_store_success || 'Purchase Successful!');\n                document.getElementById('purchaseConfirmMessage').innerHTML = `\n                    ${(ANONCAM_DATA.lang.js_store_freeze_success || 'You now have {count} Streak Freeze{s}!').replace('{count}', response.data.freeze_count).replace('{s}', response.data.freeze_count !== 1 ? 's' : '')}<br>\n                    <span style=\"font-size:12px;color:#60A5FA;\">${(ANONCAM_DATA.lang.js_store_freeze_hint || \"They'll automatically protect your streak if you miss a day.\")}<\/span>\n                `;\n                confirmBtn.style.display = 'none';\n\n                \/\/ Close modal after 2 seconds\n                setTimeout(() => {\n                    closePurchaseConfirmModal();\n                    resetPurchaseButton();\n                }, 2000);\n\n            } else {\n                \/\/ Show error\n                document.getElementById('purchaseConfirmIcon').textContent = '\u274c';\n                document.getElementById('purchaseConfirmTitle').textContent = (ANONCAM_DATA.lang.js_store_failed || 'Purchase Failed');\n                \n                let errorMsg = response.data?.message || response.data || 'An error occurred';\n                document.getElementById('purchaseConfirmMessage').innerHTML = errorMsg;\n                \n                setTimeout(() => {\n                    resetPurchaseButton();\n                }, 1000);\n            }\n        })\n        .catch(err => {\n            console.error('Streak freeze purchase error:', err);\n            document.getElementById('purchaseConfirmIcon').textContent = '\u26a0\ufe0f';\n            document.getElementById('purchaseConfirmTitle').textContent = (ANONCAM_DATA.lang.js_store_connection_issue || 'Connection Issue');\n            document.getElementById('purchaseConfirmMessage').innerHTML = `\n                <span style=\"color:#FBBF24;\">${(ANONCAM_DATA.lang.js_store_confirm_hint || \"We couldn't confirm your purchase.\")}<\/span><br>\n                <span style=\"font-size:12px;color:#9CA3AF;\">${(ANONCAM_DATA.lang.js_store_check_freezes || 'Please check your streak freezes to see if it completed.')}<\/span>\n            `;\n\n            setTimeout(() => {\n                resetPurchaseButton();\n            }, 1000);\n\n            purchaseInProgress = false;\n        });\n\n        return;\n    }\n    \n    \/\/ Regular store item purchase (sparks)\n    const { itemType, price } = pendingPurchase;\n    \n    \/\/ Make AJAX request\n    fetch(ANONCAM_DATA.ajax_url, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n        body: new URLSearchParams({\n            action: 'meetgle_purchase_item',\n            nonce: ANONCAM_DATA.store_purchase_nonce,\n            item_type: itemType\n        })\n    })\n    .then(res => {\n        \/\/ \u2705 FIX: Check if response is ok before parsing JSON\n        if (!res.ok) {\n            throw new Error((ANONCAM_DATA.lang.js_store_server_error || 'Server returned error status: {code}').replace('{code}', res.status));\n        }\n        return res.json();\n    })\n    .then(response => {\n        if (response.success) {\n            \/\/ Update balance display\n            const balanceEl = document.getElementById('storeSparkBalance');\n            if (balanceEl) {\n                balanceEl.textContent = response.data.new_balance.toLocaleString();\n            }\n            \n            \/\/ Update main spark balance display\n            const mainBalanceEl = document.getElementById('sparkBalanceAmount');\n            if (mainBalanceEl) {\n                mainBalanceEl.textContent = response.data.new_balance.toLocaleString();\n            }\n            \n            \/\/ Show success message\n            document.getElementById('purchaseConfirmIcon').textContent = '\u2705';\n            document.getElementById('purchaseConfirmTitle').textContent = (ANONCAM_DATA.lang.js_store_success || 'Purchase Successful!');\n            document.getElementById('purchaseConfirmMessage').innerHTML = `\n                ${(ANONCAM_DATA.lang.js_store_item_active || '{item} is now active!').replace('{item}', '<strong>' + response.data.item_name + '<\/strong>')}<br>\n                <span style=\"font-size:12px;color:#10B981;\">${(ANONCAM_DATA.lang.js_store_expires || 'Expires in {duration}').replace('{duration}', itemDurations[itemType])}<\/span>\n            `;\n            confirmBtn.style.display = 'none';\n            \n            \/\/ Update flags based on item type\n            if (itemType === 'reveal_gender') {\n                canSeeGender = true;\n                window.canSeeGender = true;\n                updateStoreItemStatus('reveal_gender', response.data.time_remaining);\n            } else if (itemType === 'match_filters') {\n                canUseFilters = true;\n                window.canUseFilters = true;\n                updateStoreItemStatus('match_filters', response.data.time_remaining);\n                \n                \/\/ Show the match preferences button if it was hidden\n                showMatchPreferencesButton();\n            } else if (itemType === 'full_history') {\n                updateStoreItemStatus('full_history', response.data.time_remaining);\n            } else if (itemType === 'blue_verification') {\n                updateStoreItemStatus('blue_verification', response.data.time_remaining);\n            }\n            \n            \/\/ Close modal after 2 seconds\n            setTimeout(() => {\n                closePurchaseConfirmModal();\n                \/\/ Reset button and unlock\n                resetPurchaseButton();\n                \n                \/\/ If user just bought filters, close store and open the filter drawer\n                if (itemType === 'match_filters') {\n                    closeSparkStoreModal();\n                    \/\/ Small delay then open the preferences drawer\n                    setTimeout(() => {\n                        if (typeof openMatchPreferencesDrawer === 'function') {\n                            openMatchPreferencesDrawer();\n                        }\n                    }, 300);\n                }\n            }, 2000);\n            \n        } else {\n            \/\/ Show error from server\n            document.getElementById('purchaseConfirmIcon').textContent = '\u274c';\n            document.getElementById('purchaseConfirmTitle').textContent = (ANONCAM_DATA.lang.js_store_failed || 'Purchase Failed');\n\n            let errorMsg = response.data?.error || response.data || 'An error occurred';\n            if (errorMsg === 'Insufficient sparks') {\n                errorMsg = (ANONCAM_DATA.lang.js_store_not_enough || 'You need {needed} sparks but only have {have}.').replace('{needed}', response.data.required).replace('{have}', response.data.current);\n            } else if (errorMsg === 'Purchase already processing. Please wait a moment.') {\n                \/\/ \u2705 FIX: If server says it's processing, the purchase likely went through\n                errorMsg = (ANONCAM_DATA.lang.js_store_may_completed || 'Your purchase may have already completed. Please close this window and check your passes.');\n            }\n            \n            document.getElementById('purchaseConfirmMessage').innerHTML = errorMsg;\n            \n            \/\/ \u2705 Reset button but add cooldown before allowing retry\n            setTimeout(() => {\n                resetPurchaseButton();\n            }, 1000); \/\/ 1 second cooldown before retry allowed\n        }\n    })\n    .catch(err => {\n        console.error('Purchase error:', err);\n        \n        \/\/ \u2705 FIX: Don't assume failure - the purchase may have succeeded\n        \/\/ Show a more helpful message that doesn't panic the user\n        document.getElementById('purchaseConfirmIcon').textContent = '\u26a0\ufe0f';\n        document.getElementById('purchaseConfirmTitle').textContent = (ANONCAM_DATA.lang.js_store_connection_issue || 'Connection Issue');\n        document.getElementById('purchaseConfirmMessage').innerHTML = `\n            <span style=\"color:#FBBF24;\">${(ANONCAM_DATA.lang.js_store_confirm_hint || \"We couldn't confirm your purchase.\")}<\/span><br>\n            <span style=\"font-size:12px;color:#9CA3AF;\">${(ANONCAM_DATA.lang.js_store_check_passes || 'Your purchase may have completed successfully. Please close this window and check if your pass is active.')}<\/span>\n        `;\n\n        \/\/ \u2705 Change button to \"Close & Check\" instead of retry\n        confirmBtn.style.display = 'block';\n        confirmBtn.disabled = false;\n        confirmBtn.textContent = (ANONCAM_DATA.lang.js_store_close_check || 'Close & Check');\n        confirmBtn.style.opacity = '1';\n        confirmBtn.style.pointerEvents = 'auto';\n        confirmBtn.style.background = 'linear-gradient(135deg, #6B7280 0%, #4B5563 100%)';\n        confirmBtn.onclick = function() {\n            closePurchaseConfirmModal();\n            resetPurchaseButton();\n            \/\/ Refresh the passes status\n            checkActivePasses();\n        };\n        \n        purchaseInProgress = false;\n    });\n}\n\n\/\/ \u2705 NEW: Helper function to reset purchase button state\nfunction resetPurchaseButton() {\n    const confirmBtn = document.getElementById('purchaseConfirmBtn');\n    confirmBtn.style.display = 'block';\n    confirmBtn.disabled = false;\n    confirmBtn.textContent = (ANONCAM_DATA.lang.js_store_buy_now || 'Buy Now');\n    confirmBtn.style.opacity = '1';\n    confirmBtn.style.pointerEvents = 'auto';\n    \/\/ \u2705 Use CSS variable for theme support\n    confirmBtn.style.background = 'var(--theme-store-price-gradient, linear-gradient(135deg, #EC4899 0%, #F472B6 100%))';\n    confirmBtn.onclick = confirmPurchase; \/\/ \u2705 Restore original onclick handler\n    document.getElementById('purchaseConfirmIcon').textContent = '\ud83c\udf81';\n    purchaseInProgress = false; \/\/ \u2705 Release the lock\n}\n\nfunction updateStoreItemStatus(itemType, timeRemaining) {\n    const item = document.getElementById('storeItem_' + itemType);\n    if (!item) return;\n\n    \/\/ Add active badge if not already there\n    let badge = item.querySelector('.active-badge');\n    if (!badge) {\n        badge = document.createElement('div');\n        badge.className = 'active-badge';\n        badge.style.cssText = 'position:absolute;top:-8px;right:-8px;background:linear-gradient(135deg, #10B981 0%, #059669 100%);color:white;padding:3px 8px;border-radius:10px;font-size:9px;font-weight:600;';\n        badge.textContent = (ANONCAM_DATA.lang.js_store_badge_active || 'ACTIVE');\n        item.appendChild(badge);\n    }\n\n    \/\/ Update timer display based on item type\n    const hours = Math.floor(timeRemaining \/ 3600);\n    const minutes = Math.floor((timeRemaining % 3600) \/ 60);\n\n    const timerId = itemType === 'reveal_gender' ? 'genderPassTimer' : itemType === 'match_filters' ? 'filterPassTimer' : itemType === 'full_history' ? 'fullHistoryPassTimer' : 'blueVerificationPassTimer';\n    let timerEl = document.getElementById(timerId);\n\n    if (timerEl) {\n        timerEl.textContent = `${hours}h ${minutes}m`;\n        timerEl.style.cssText = 'color:#10B981;font-size:10px;font-weight:600;';\n    }\n}\n\nfunction showMatchPreferencesButton() {\n    \/\/ Button and drawer always exist now \u2014 just unlock the cards\n    window.canUseFilters = true;\n    if (typeof unlockMatchPreferencesCards === 'function') {\n        unlockMatchPreferencesCards();\n    }\n}\n\nfunction checkActivePasses() {\n    if (typeof ANONCAM_DATA === 'undefined' || !ANONCAM_DATA.isUserLoggedIn) return;\n    \n    fetch(ANONCAM_DATA.ajax_url, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/x-www-form-urlencoded' },\n        body: new URLSearchParams({\n            action: 'meetgle_check_active_passes'\n        })\n    })\n    .then(res => res.json())\n    .then(response => {\n        if (response.success && response.data) {\n            \/\/ Update global state\n            canSeeGender = response.data.is_admin || (response.data.passes.reveal_gender?.active === true);\n            canUseFilters = response.data.is_admin || (response.data.passes.match_filters?.active === true);\n            window.canSeeGender = canSeeGender;\n            window.canUseFilters = canUseFilters;\n            isAdmin = response.data.is_admin;\n            \n            \/\/ Update balance\n            if (response.data.balance !== undefined) {\n                const balanceEl = document.getElementById('storeSparkBalance');\n                if (balanceEl) {\n                    balanceEl.textContent = response.data.balance.toLocaleString();\n                }\n            }\n            \n            \/\/ Update reveal_gender status if active\n            if (response.data.passes.reveal_gender?.active) {\n                updateStoreItemStatus('reveal_gender', response.data.passes.reveal_gender.time_remaining);\n            }\n            \n            \/\/ Update match_filters status if active\n            if (response.data.passes.match_filters?.active) {\n                updateStoreItemStatus('match_filters', response.data.passes.match_filters.time_remaining);\n            }\n            \n            \/\/ Update full_history status if active\n            if (response.data.passes.full_history?.active) {\n                updateStoreItemStatus('full_history', response.data.passes.full_history.time_remaining);\n            }\n            \n            \/\/ Update blue_verification status if active\n            if (response.data.passes.blue_verification?.active) {\n                updateStoreItemStatus('blue_verification', response.data.passes.blue_verification.time_remaining);\n            }\n        }\n    })\n    .catch(err => console.error('Error checking passes:', err));\n}\n\n\/\/ Close modal on backdrop click \u2014 use closest() to handle overflow scroll containers\ndocument.getElementById('sparkStoreModal').addEventListener('click', function(e) {\n    if (!e.target.closest('.meetgle-modal-content')) {\n        closeSparkStoreModal();\n    }\n});\n\ndocument.getElementById('purchaseConfirmModal').addEventListener('click', function(e) {\n    if (e.target === this) {\n        closePurchaseConfirmModal();\n    }\n});\n\n\/\/ Close on Escape key\ndocument.addEventListener('keydown', function(e) {\n    if (e.key === 'Escape') {\n        const storeModal = document.getElementById('sparkStoreModal');\n        const confirmModal = document.getElementById('purchaseConfirmModal');\n        \n        if (confirmModal && confirmModal.style.display === 'flex') {\n            closePurchaseConfirmModal();\n        } else if (storeModal && storeModal.style.display === 'flex') {\n            closeSparkStoreModal();\n        }\n    }\n});\n\n\/\/ Check passes on page load\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initial check after a short delay\n    setTimeout(checkActivePasses, 1000);\n});\n\n\/\/ Expose globals for videochat to use\nwindow.canSeeGender = canSeeGender;\nwindow.canUseFilters = canUseFilters;\nwindow.isAdmin = isAdmin;\n\n\/\/ Handle Streak Freeze purchase - uses the same confirmation modal flow\nfunction handleStreakFreezePurchase() {\n    \/\/ Check if logged in\n    if (typeof ANONCAM_DATA === 'undefined' || !ANONCAM_DATA.isUserLoggedIn) {\n        alert(ANONCAM_DATA.lang.js_store_login_purchase || 'Please log in to make purchases.');\n        return;\n    }\n\n    \/\/ Show confirmation modal\n    pendingPurchase = { type: 'streak_freeze', itemType: 'streak_freeze', price: 200 };\n\n    document.getElementById('purchaseConfirmIcon').textContent = '\u2744\ufe0f';\n    document.getElementById('purchaseConfirmTitle').textContent = (ANONCAM_DATA.lang.js_store_buy_freeze_title || 'Buy Streak Freeze');\n    document.getElementById('purchaseConfirmMessage').innerHTML = `\n        ${(ANONCAM_DATA.lang.js_store_freeze_confirm || 'Purchase a Streak Freeze for 200 \u26a1?')}<br>\n        <span style=\"font-size:12px;color:#6B7280;\">${(ANONCAM_DATA.lang.js_store_freeze_auto || 'Automatically saves your streak if you miss a day.')}<\/span>\n    `;\n\n    \/\/ Reset button style with blue gradient for streak freeze\n    const confirmBtn = document.getElementById('purchaseConfirmBtn');\n    confirmBtn.textContent = (ANONCAM_DATA.lang.js_store_buy_now || 'Buy Now');\n    confirmBtn.style.background = 'linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%)';\n    \n    document.getElementById('purchaseConfirmModal').style.display = 'flex';\n}\n\n\/\/ Make it globally available\nwindow.handleStreakFreezePurchase = handleStreakFreezePurchase;\n<\/script>\n        \n        <!-- Leaderboard Modal -->\n        <!-- Leaderboard Modal -->\n<div id=\"leaderboardModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content leaderboard-modal-content\" style=\"max-width:700px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 24px 0 24px;display:flex;align-items:center;justify-content:space-between;\">\n            <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Top Earners<\/h2>\n            <button onclick=\"closeLeaderboardModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n        <\/div>\n\n        <!-- Content -->\n        <div style=\"padding:16px 24px 24px 24px;\">\n\n            <!-- Week Range Display -->\n            <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:14px;margin-bottom:16px;text-align:center;\">\n                <div style=\"font-size:28px;margin-bottom:4px;\">\ud83c\udfc6<\/div>\n                <p id=\"leaderboardWeekRange\" style=\"color:rgba(255,255,255,0.4);margin:0;font-size:13px;\">Loading...<\/p>\n            <\/div>\n\n            <!-- Loading State -->\n            <div id=\"leaderboardLoading\" style=\"text-align:center;padding:48px 0;\">\n                <div style=\"width:32px;height:32px;border:3px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.5);border-radius:50%;margin:0 auto 12px;animation:lbSpin 0.8s linear infinite;\"><\/div>\n                <div style=\"color:rgba(255,255,255,0.35);font-size:13px;\">Loading leaderboard...<\/div>\n            <\/div>\n\n            <!-- Leaderboard Content -->\n            <div id=\"leaderboardContent\" style=\"display:none;\">\n\n                <!-- PODIUM -->\n                <div style=\"margin-bottom:16px;\">\n                    <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:12px;\">\n                        <div style=\"width:6px;height:6px;border-radius:50%;background:#F59E0B;\"><\/div>\n                        <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;\">Podium<\/span>\n                    <\/div>\n                    <div id=\"leaderboardPodium\" class=\"lb-podium\" style=\"display:flex;justify-content:center;align-items:flex-end;gap:10px;\">\n\n                        <!-- 2nd Place -->\n                        <div id=\"rank2\" class=\"leaderboard-rank-animated lb-podium-card\" style=\"flex:1;animation-delay:0.1s;\">\n                            <div class=\"lb-rank-inner lb-rank-silver\" style=\"background:rgba(192,192,192,0.06);border:1px solid rgba(192,192,192,0.2);border-radius:14px;padding:16px;text-align:center;position:relative;transition:all 0.2s;\">\n                                <div class=\"lb-rank-badge\" style=\"position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#D1D5DB,#9CA3AF);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;\">2<\/div>\n                                <img decoding=\"async\" id=\"avatar2\" src=\"\" style=\"width:48px;height:48px;border-radius:50%;margin:8px auto 8px;display:block;border:2px solid rgba(192,192,192,0.4);object-fit:cover;\">\n                                <div style=\"color:white;font-weight:600;font-size:13px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" id=\"username2\">-<\/div>\n                                <div style=\"display:inline-block;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);padding:4px 10px;border-radius:12px;color:rgba(255,255,255,0.5);font-size:12px;font-weight:700;\">\n                                    <span id=\"sparks2\">0<\/span> <span style=\"color:#F59E0B;\">\u26a1<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- 1st Place -->\n                        <div id=\"rank1\" class=\"leaderboard-rank-animated lb-podium-card\" style=\"flex:1;\">\n                            <div class=\"lb-rank-inner lb-rank-gold\" style=\"background:rgba(255,215,0,0.06);border:1px solid rgba(255,215,0,0.25);border-radius:14px;padding:20px 16px;text-align:center;position:relative;box-shadow:0 0 30px rgba(255,215,0,0.08);transition:all 0.2s;\">\n                                <div class=\"lb-rank-badge\" style=\"position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#F59E0B,#D97706);color:#000;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;\">1<\/div>\n                                <div style=\"font-size:24px;margin-bottom:4px;\">\ud83d\udc51<\/div>\n                                <img decoding=\"async\" id=\"avatar1\" src=\"\" style=\"width:56px;height:56px;border-radius:50%;margin:0 auto 8px;display:block;border:2px solid rgba(255,215,0,0.4);object-fit:cover;\">\n                                <div style=\"color:white;font-weight:700;font-size:14px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" id=\"username1\">-<\/div>\n                                <div style=\"display:inline-block;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);padding:4px 10px;border-radius:12px;color:#F59E0B;font-size:14px;font-weight:700;\">\n                                    <span id=\"sparks1\">0<\/span> \u26a1\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- 3rd Place -->\n                        <div id=\"rank3\" class=\"leaderboard-rank-animated lb-podium-card\" style=\"flex:1;animation-delay:0.2s;\">\n                            <div class=\"lb-rank-inner lb-rank-bronze\" style=\"background:rgba(205,127,50,0.06);border:1px solid rgba(205,127,50,0.2);border-radius:14px;padding:16px;text-align:center;position:relative;transition:all 0.2s;\">\n                                <div class=\"lb-rank-badge\" style=\"position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#CD7F32,#A0522D);color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;\">3<\/div>\n                                <img decoding=\"async\" id=\"avatar3\" src=\"\" style=\"width:48px;height:48px;border-radius:50%;margin:8px auto 8px;display:block;border:2px solid rgba(205,127,50,0.4);object-fit:cover;\">\n                                <div style=\"color:white;font-weight:600;font-size:13px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\" id=\"username3\">-<\/div>\n                                <div style=\"display:inline-block;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);padding:4px 10px;border-radius:12px;color:rgba(255,255,255,0.5);font-size:12px;font-weight:700;\">\n                                    <span id=\"sparks3\">0<\/span> <span style=\"color:#F59E0B;\">\u26a1<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- RANKS 4+ -->\n                <div>\n                    <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                        <div style=\"width:6px;height:6px;border-radius:50%;background:#10B981;\"><\/div>\n                        <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;\">Rankings<\/span>\n                    <\/div>\n                    <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;max-height:320px;overflow-y:auto;\" class=\"lb-list-scroll\">\n                        <div id=\"leaderboardList\" style=\"display:flex;flex-direction:column;gap:1px;\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Error State -->\n            <div id=\"leaderboardError\" style=\"display:none;text-align:center;padding:48px 0;\">\n                <div style=\"font-size:28px;margin-bottom:12px;\">\ud83d\ude1e<\/div>\n                <div style=\"color:rgba(255,255,255,0.4);font-size:13px;\">Failed to load leaderboard. Please try again.<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n        \n\n\n        \n        <!-- Match Preferences Drawer (always rendered for all users) -->\n        \n<!-- Match Preferences Drawer -->\n<div id=\"matchPreferencesDrawer\" style=\"display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:100000;padding:0;opacity:0;transition:opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);\">\n    <div id=\"drawerContent\" style=\"position:absolute;left:0;right:0;bottom:0;background:rgba(18,18,24,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top-left-radius:20px;border-top-right-radius:20px;padding:24px;box-shadow:0 -4px 32px rgba(0,0,0,0.5);border-top:1px solid rgba(255,255,255,0.08);transform:translateY(100%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\">\n\n        <!-- Header -->\n        <div style=\"display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;\">\n            <div style=\"display:flex;align-items:center;gap:10px;\">\n                <div style=\"width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;\">\n                    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,0.5)\" stroke-width=\"2\" stroke-linecap=\"round\"><line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"\/><circle cx=\"15\" cy=\"6\" r=\"2\" fill=\"rgba(255,255,255,0.5)\"\/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"\/><circle cx=\"9\" cy=\"12\" r=\"2\" fill=\"rgba(255,255,255,0.5)\"\/><line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"\/><circle cx=\"14\" cy=\"18\" r=\"2\" fill=\"rgba(255,255,255,0.5)\"\/><\/svg>\n                <\/div>\n                <span style=\"font-size:15px;font-weight:700;color:rgba(255,255,255,0.8);letter-spacing:0.5px;\">MATCH PREFERENCES<\/span>\n            <\/div>\n            <button id=\"drawerCloseBtn\" style=\"background:rgba(255,255,255,0.06);border:none;color:rgba(255,255,255,0.5);width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;padding:0;\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n            <\/button>\n        <\/div>\n\n        <!-- Filter Cards -->\n        <div style=\"display:flex;flex-direction:column;gap:6px;\">\n\n            <!-- Gender Filter Card -->\n            <div id=\"genderFilterCard\" class=\"mp-card\" style=\"display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:background 0.15s;user-select:none;\">\n                <div style=\"display:flex;align-items:center;gap:12px;\">\n                    <div id=\"genderFilterIcon\" style=\"width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,0.5)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n                    <\/div>\n                    <div>\n                        <div style=\"font-size:15px;font-weight:600;color:rgba(255,255,255,0.8);\">Gender<\/div>\n                        <div id=\"genderFilterLabel\" style=\"font-size:12px;color:rgba(255,255,255,0.35);font-weight:500;\">Everyone<\/div>\n                    <\/div>\n                <\/div>\n                <div id=\"genderCardRight\" style=\"display:flex;align-items:center;\">\n                    <span style=\"color:rgba(255,255,255,0.3);font-size:16px;\">\u203a<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Country Filter Card -->\n            <div id=\"countryFilterCard\" class=\"mp-card\" style=\"display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:background 0.15s;user-select:none;\">\n                <div style=\"display:flex;align-items:center;gap:12px;\">\n                    <div id=\"countryFilterIcon\" style=\"width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                        <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,0.5)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n                    <\/div>\n                    <div>\n                        <div style=\"font-size:15px;font-weight:600;color:rgba(255,255,255,0.8);\">Country<\/div>\n                        <div id=\"countryFilterLabel\" style=\"font-size:12px;color:rgba(255,255,255,0.35);font-weight:500;\">Nearby<\/div>\n                    <\/div>\n                <\/div>\n                <div id=\"countryCardRight\" style=\"display:flex;align-items:center;\">\n                    <span style=\"color:rgba(255,255,255,0.3);font-size:16px;\">\u203a<\/span>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Hidden select elements (for filter functionality) -->\n<select id=\"genderFilter\" style=\"display:none;\">\n    <option value=\"\">All Genders<\/option>\n    <option value=\"male\">\u2642 Males Only<\/option>\n    <option value=\"female\">\u2640 Females Only<\/option>\n<\/select>\n\n<select id=\"countryFilter\" style=\"display:none;\">\n    <option value=\"\">All Countries<\/option>\n<option value=\"AF\">\ud83c\udde6\ud83c\uddeb Afghanistan<\/option>\n<option value=\"AL\">\ud83c\udde6\ud83c\uddf1 Albania<\/option>\n<option value=\"DZ\">\ud83c\udde9\ud83c\uddff Algeria<\/option>\n<option value=\"AD\">\ud83c\udde6\ud83c\udde9 Andorra<\/option>\n<option value=\"AO\">\ud83c\udde6\ud83c\uddf4 Angola<\/option>\n<option value=\"AG\">\ud83c\udde6\ud83c\uddec Antigua and Barbuda<\/option>\n<option value=\"AR\">\ud83c\udde6\ud83c\uddf7 Argentina<\/option>\n<option value=\"AM\">\ud83c\udde6\ud83c\uddf2 Armenia<\/option>\n<option value=\"AU\">\ud83c\udde6\ud83c\uddfa Australia<\/option>\n<option value=\"AT\">\ud83c\udde6\ud83c\uddf9 Austria<\/option>\n<option value=\"AZ\">\ud83c\udde6\ud83c\uddff Azerbaijan<\/option>\n<option value=\"BS\">\ud83c\udde7\ud83c\uddf8 Bahamas<\/option>\n<option value=\"BH\">\ud83c\udde7\ud83c\udded Bahrain<\/option>\n<option value=\"BD\">\ud83c\udde7\ud83c\udde9 Bangladesh<\/option>\n<option value=\"BB\">\ud83c\udde7\ud83c\udde7 Barbados<\/option>\n<option value=\"BY\">\ud83c\udde7\ud83c\uddfe Belarus<\/option>\n<option value=\"BE\">\ud83c\udde7\ud83c\uddea Belgium<\/option>\n<option value=\"BZ\">\ud83c\udde7\ud83c\uddff Belize<\/option>\n<option value=\"BJ\">\ud83c\udde7\ud83c\uddef Benin<\/option>\n<option value=\"BT\">\ud83c\udde7\ud83c\uddf9 Bhutan<\/option>\n<option value=\"BO\">\ud83c\udde7\ud83c\uddf4 Bolivia<\/option>\n<option value=\"BA\">\ud83c\udde7\ud83c\udde6 Bosnia and Herzegovina<\/option>\n<option value=\"BW\">\ud83c\udde7\ud83c\uddfc Botswana<\/option>\n<option value=\"BR\">\ud83c\udde7\ud83c\uddf7 Brazil<\/option>\n<option value=\"BN\">\ud83c\udde7\ud83c\uddf3 Brunei<\/option>\n<option value=\"BG\">\ud83c\udde7\ud83c\uddec Bulgaria<\/option>\n<option value=\"BF\">\ud83c\udde7\ud83c\uddeb Burkina Faso<\/option>\n<option value=\"BI\">\ud83c\udde7\ud83c\uddee Burundi<\/option>\n<option value=\"KH\">\ud83c\uddf0\ud83c\udded Cambodia<\/option>\n<option value=\"CM\">\ud83c\udde8\ud83c\uddf2 Cameroon<\/option>\n<option value=\"CA\">\ud83c\udde8\ud83c\udde6 Canada<\/option>\n<option value=\"CV\">\ud83c\udde8\ud83c\uddfb Cape Verde<\/option>\n<option value=\"CF\">\ud83c\udde8\ud83c\uddeb Central African Republic<\/option>\n<option value=\"TD\">\ud83c\uddf9\ud83c\udde9 Chad<\/option>\n<option value=\"CL\">\ud83c\udde8\ud83c\uddf1 Chile<\/option>\n<option value=\"CN\">\ud83c\udde8\ud83c\uddf3 China<\/option>\n<option value=\"CO\">\ud83c\udde8\ud83c\uddf4 Colombia<\/option>\n<option value=\"KM\">\ud83c\uddf0\ud83c\uddf2 Comoros<\/option>\n<option value=\"CG\">\ud83c\udde8\ud83c\uddec Congo<\/option>\n<option value=\"CD\">\ud83c\udde8\ud83c\udde9 Congo (DRC)<\/option>\n<option value=\"CR\">\ud83c\udde8\ud83c\uddf7 Costa Rica<\/option>\n<option value=\"HR\">\ud83c\udded\ud83c\uddf7 Croatia<\/option>\n<option value=\"CU\">\ud83c\udde8\ud83c\uddfa Cuba<\/option>\n<option value=\"CY\">\ud83c\udde8\ud83c\uddfe Cyprus<\/option>\n<option value=\"CZ\">\ud83c\udde8\ud83c\uddff Czech Republic<\/option>\n<option value=\"DK\">\ud83c\udde9\ud83c\uddf0 Denmark<\/option>\n<option value=\"DJ\">\ud83c\udde9\ud83c\uddef Djibouti<\/option>\n<option value=\"DM\">\ud83c\udde9\ud83c\uddf2 Dominica<\/option>\n<option value=\"DO\">\ud83c\udde9\ud83c\uddf4 Dominican Republic<\/option>\n<option value=\"EC\">\ud83c\uddea\ud83c\udde8 Ecuador<\/option>\n<option value=\"EG\">\ud83c\uddea\ud83c\uddec Egypt<\/option>\n<option value=\"SV\">\ud83c\uddf8\ud83c\uddfb El Salvador<\/option>\n<option value=\"GQ\">\ud83c\uddec\ud83c\uddf6 Equatorial Guinea<\/option>\n<option value=\"ER\">\ud83c\uddea\ud83c\uddf7 Eritrea<\/option>\n<option value=\"EE\">\ud83c\uddea\ud83c\uddea Estonia<\/option>\n<option value=\"ET\">\ud83c\uddea\ud83c\uddf9 Ethiopia<\/option>\n<option value=\"FJ\">\ud83c\uddeb\ud83c\uddef Fiji<\/option>\n<option value=\"FI\">\ud83c\uddeb\ud83c\uddee Finland<\/option>\n<option value=\"FR\">\ud83c\uddeb\ud83c\uddf7 France<\/option>\n<option value=\"GA\">\ud83c\uddec\ud83c\udde6 Gabon<\/option>\n<option value=\"GM\">\ud83c\uddec\ud83c\uddf2 Gambia<\/option>\n<option value=\"GE\">\ud83c\uddec\ud83c\uddea Georgia<\/option>\n<option value=\"DE\">\ud83c\udde9\ud83c\uddea Germany<\/option>\n<option value=\"GH\">\ud83c\uddec\ud83c\udded Ghana<\/option>\n<option value=\"GR\">\ud83c\uddec\ud83c\uddf7 Greece<\/option>\n<option value=\"GD\">\ud83c\uddec\ud83c\udde9 Grenada<\/option>\n<option value=\"GT\">\ud83c\uddec\ud83c\uddf9 Guatemala<\/option>\n<option value=\"GN\">\ud83c\uddec\ud83c\uddf3 Guinea<\/option>\n<option value=\"GW\">\ud83c\uddec\ud83c\uddfc Guinea-Bissau<\/option>\n<option value=\"GY\">\ud83c\uddec\ud83c\uddfe Guyana<\/option>\n<option value=\"HT\">\ud83c\udded\ud83c\uddf9 Haiti<\/option>\n<option value=\"HN\">\ud83c\udded\ud83c\uddf3 Honduras<\/option>\n<option value=\"HU\">\ud83c\udded\ud83c\uddfa Hungary<\/option>\n<option value=\"IS\">\ud83c\uddee\ud83c\uddf8 Iceland<\/option>\n<option value=\"IN\">\ud83c\uddee\ud83c\uddf3 India<\/option>\n<option value=\"ID\">\ud83c\uddee\ud83c\udde9 Indonesia<\/option>\n<option value=\"IR\">\ud83c\uddee\ud83c\uddf7 Iran<\/option>\n<option value=\"IQ\">\ud83c\uddee\ud83c\uddf6 Iraq<\/option>\n<option value=\"IE\">\ud83c\uddee\ud83c\uddea Ireland<\/option>\n<option value=\"IL\">\ud83c\uddee\ud83c\uddf1 Israel<\/option>\n<option value=\"IT\">\ud83c\uddee\ud83c\uddf9 Italy<\/option>\n<option value=\"CI\">\ud83c\udde8\ud83c\uddee Ivory Coast<\/option>\n<option value=\"JM\">\ud83c\uddef\ud83c\uddf2 Jamaica<\/option>\n<option value=\"JP\">\ud83c\uddef\ud83c\uddf5 Japan<\/option>\n<option value=\"JO\">\ud83c\uddef\ud83c\uddf4 Jordan<\/option>\n<option value=\"KZ\">\ud83c\uddf0\ud83c\uddff Kazakhstan<\/option>\n<option value=\"KE\">\ud83c\uddf0\ud83c\uddea Kenya<\/option>\n<option value=\"KI\">\ud83c\uddf0\ud83c\uddee Kiribati<\/option>\n<option value=\"KW\">\ud83c\uddf0\ud83c\uddfc Kuwait<\/option>\n<option value=\"KG\">\ud83c\uddf0\ud83c\uddec Kyrgyzstan<\/option>\n<option value=\"LA\">\ud83c\uddf1\ud83c\udde6 Laos<\/option>\n<option value=\"LV\">\ud83c\uddf1\ud83c\uddfb Latvia<\/option>\n<option value=\"LB\">\ud83c\uddf1\ud83c\udde7 Lebanon<\/option>\n<option value=\"LS\">\ud83c\uddf1\ud83c\uddf8 Lesotho<\/option>\n<option value=\"LR\">\ud83c\uddf1\ud83c\uddf7 Liberia<\/option>\n<option value=\"LY\">\ud83c\uddf1\ud83c\uddfe Libya<\/option>\n<option value=\"LI\">\ud83c\uddf1\ud83c\uddee Liechtenstein<\/option>\n<option value=\"LT\">\ud83c\uddf1\ud83c\uddf9 Lithuania<\/option>\n<option value=\"LU\">\ud83c\uddf1\ud83c\uddfa Luxembourg<\/option>\n<option value=\"MK\">\ud83c\uddf2\ud83c\uddf0 Macedonia<\/option>\n<option value=\"MG\">\ud83c\uddf2\ud83c\uddec Madagascar<\/option>\n<option value=\"MW\">\ud83c\uddf2\ud83c\uddfc Malawi<\/option>\n<option value=\"MY\">\ud83c\uddf2\ud83c\uddfe Malaysia<\/option>\n<option value=\"MV\">\ud83c\uddf2\ud83c\uddfb Maldives<\/option>\n<option value=\"ML\">\ud83c\uddf2\ud83c\uddf1 Mali<\/option>\n<option value=\"MT\">\ud83c\uddf2\ud83c\uddf9 Malta<\/option>\n<option value=\"MH\">\ud83c\uddf2\ud83c\udded Marshall Islands<\/option>\n<option value=\"MR\">\ud83c\uddf2\ud83c\uddf7 Mauritania<\/option>\n<option value=\"MU\">\ud83c\uddf2\ud83c\uddfa Mauritius<\/option>\n<option value=\"MX\">\ud83c\uddf2\ud83c\uddfd Mexico<\/option>\n<option value=\"FM\">\ud83c\uddeb\ud83c\uddf2 Micronesia<\/option>\n<option value=\"MD\">\ud83c\uddf2\ud83c\udde9 Moldova<\/option>\n<option value=\"MC\">\ud83c\uddf2\ud83c\udde8 Monaco<\/option>\n<option value=\"MN\">\ud83c\uddf2\ud83c\uddf3 Mongolia<\/option>\n<option value=\"ME\">\ud83c\uddf2\ud83c\uddea Montenegro<\/option>\n<option value=\"MA\">\ud83c\uddf2\ud83c\udde6 Morocco<\/option>\n<option value=\"MZ\">\ud83c\uddf2\ud83c\uddff Mozambique<\/option>\n<option value=\"MM\">\ud83c\uddf2\ud83c\uddf2 Myanmar<\/option>\n<option value=\"NA\">\ud83c\uddf3\ud83c\udde6 Namibia<\/option>\n<option value=\"NR\">\ud83c\uddf3\ud83c\uddf7 Nauru<\/option>\n<option value=\"NP\">\ud83c\uddf3\ud83c\uddf5 Nepal<\/option>\n<option value=\"NL\">\ud83c\uddf3\ud83c\uddf1 Netherlands<\/option>\n<option value=\"NZ\">\ud83c\uddf3\ud83c\uddff New Zealand<\/option>\n<option value=\"NI\">\ud83c\uddf3\ud83c\uddee Nicaragua<\/option>\n<option value=\"NE\">\ud83c\uddf3\ud83c\uddea Niger<\/option>\n<option value=\"NG\">\ud83c\uddf3\ud83c\uddec Nigeria<\/option>\n<option value=\"KP\">\ud83c\uddf0\ud83c\uddf5 North Korea<\/option>\n<option value=\"NO\">\ud83c\uddf3\ud83c\uddf4 Norway<\/option>\n<option value=\"OM\">\ud83c\uddf4\ud83c\uddf2 Oman<\/option>\n<option value=\"PK\">\ud83c\uddf5\ud83c\uddf0 Pakistan<\/option>\n<option value=\"PW\">\ud83c\uddf5\ud83c\uddfc Palau<\/option>\n<option value=\"PS\">\ud83c\uddf5\ud83c\uddf8 Palestine<\/option>\n<option value=\"PA\">\ud83c\uddf5\ud83c\udde6 Panama<\/option>\n<option value=\"PG\">\ud83c\uddf5\ud83c\uddec Papua New Guinea<\/option>\n<option value=\"PY\">\ud83c\uddf5\ud83c\uddfe Paraguay<\/option>\n<option value=\"PE\">\ud83c\uddf5\ud83c\uddea Peru<\/option>\n<option value=\"PH\">\ud83c\uddf5\ud83c\udded Philippines<\/option>\n<option value=\"PL\">\ud83c\uddf5\ud83c\uddf1 Poland<\/option>\n<option value=\"PT\">\ud83c\uddf5\ud83c\uddf9 Portugal<\/option>\n<option value=\"QA\">\ud83c\uddf6\ud83c\udde6 Qatar<\/option>\n<option value=\"RO\">\ud83c\uddf7\ud83c\uddf4 Romania<\/option>\n<option value=\"RU\">\ud83c\uddf7\ud83c\uddfa Russia<\/option>\n<option value=\"RW\">\ud83c\uddf7\ud83c\uddfc Rwanda<\/option>\n<option value=\"KN\">\ud83c\uddf0\ud83c\uddf3 Saint Kitts and Nevis<\/option>\n<option value=\"LC\">\ud83c\uddf1\ud83c\udde8 Saint Lucia<\/option>\n<option value=\"VC\">\ud83c\uddfb\ud83c\udde8 Saint Vincent<\/option>\n<option value=\"WS\">\ud83c\uddfc\ud83c\uddf8 Samoa<\/option>\n<option value=\"SM\">\ud83c\uddf8\ud83c\uddf2 San Marino<\/option>\n<option value=\"ST\">\ud83c\uddf8\ud83c\uddf9 Sao Tome and Principe<\/option>\n<option value=\"SA\">\ud83c\uddf8\ud83c\udde6 Saudi Arabia<\/option>\n<option value=\"SN\">\ud83c\uddf8\ud83c\uddf3 Senegal<\/option>\n<option value=\"RS\">\ud83c\uddf7\ud83c\uddf8 Serbia<\/option>\n<option value=\"SC\">\ud83c\uddf8\ud83c\udde8 Seychelles<\/option>\n<option value=\"SL\">\ud83c\uddf8\ud83c\uddf1 Sierra Leone<\/option>\n<option value=\"SG\">\ud83c\uddf8\ud83c\uddec Singapore<\/option>\n<option value=\"SK\">\ud83c\uddf8\ud83c\uddf0 Slovakia<\/option>\n<option value=\"SI\">\ud83c\uddf8\ud83c\uddee Slovenia<\/option>\n<option value=\"SB\">\ud83c\uddf8\ud83c\udde7 Solomon Islands<\/option>\n<option value=\"SO\">\ud83c\uddf8\ud83c\uddf4 Somalia<\/option>\n<option value=\"ZA\">\ud83c\uddff\ud83c\udde6 South Africa<\/option>\n<option value=\"KR\">\ud83c\uddf0\ud83c\uddf7 South Korea<\/option>\n<option value=\"SS\">\ud83c\uddf8\ud83c\uddf8 South Sudan<\/option>\n<option value=\"ES\">\ud83c\uddea\ud83c\uddf8 Spain<\/option>\n<option value=\"LK\">\ud83c\uddf1\ud83c\uddf0 Sri Lanka<\/option>\n<option value=\"SD\">\ud83c\uddf8\ud83c\udde9 Sudan<\/option>\n<option value=\"SR\">\ud83c\uddf8\ud83c\uddf7 Suriname<\/option>\n<option value=\"SZ\">\ud83c\uddf8\ud83c\uddff Swaziland<\/option>\n<option value=\"SE\">\ud83c\uddf8\ud83c\uddea Sweden<\/option>\n<option value=\"CH\">\ud83c\udde8\ud83c\udded Switzerland<\/option>\n<option value=\"SY\">\ud83c\uddf8\ud83c\uddfe Syria<\/option>\n<option value=\"TW\">\ud83c\uddf9\ud83c\uddfc Taiwan<\/option>\n<option value=\"TJ\">\ud83c\uddf9\ud83c\uddef Tajikistan<\/option>\n<option value=\"TZ\">\ud83c\uddf9\ud83c\uddff Tanzania<\/option>\n<option value=\"TH\">\ud83c\uddf9\ud83c\udded Thailand<\/option>\n<option value=\"TL\">\ud83c\uddf9\ud83c\uddf1 Timor-Leste<\/option>\n<option value=\"TG\">\ud83c\uddf9\ud83c\uddec Togo<\/option>\n<option value=\"TO\">\ud83c\uddf9\ud83c\uddf4 Tonga<\/option>\n<option value=\"TT\">\ud83c\uddf9\ud83c\uddf9 Trinidad and Tobago<\/option>\n<option value=\"TN\">\ud83c\uddf9\ud83c\uddf3 Tunisia<\/option>\n<option value=\"TR\">\ud83c\uddf9\ud83c\uddf7 Turkey<\/option>\n<option value=\"TM\">\ud83c\uddf9\ud83c\uddf2 Turkmenistan<\/option>\n<option value=\"TV\">\ud83c\uddf9\ud83c\uddfb Tuvalu<\/option>\n<option value=\"UG\">\ud83c\uddfa\ud83c\uddec Uganda<\/option>\n<option value=\"UA\">\ud83c\uddfa\ud83c\udde6 Ukraine<\/option>\n<option value=\"AE\">\ud83c\udde6\ud83c\uddea United Arab Emirates<\/option>\n<option value=\"GB\">\ud83c\uddec\ud83c\udde7 United Kingdom<\/option>\n<option value=\"US\">\ud83c\uddfa\ud83c\uddf8 United States<\/option>\n<option value=\"UY\">\ud83c\uddfa\ud83c\uddfe Uruguay<\/option>\n<option value=\"UZ\">\ud83c\uddfa\ud83c\uddff Uzbekistan<\/option>\n<option value=\"VU\">\ud83c\uddfb\ud83c\uddfa Vanuatu<\/option>\n<option value=\"VA\">\ud83c\uddfb\ud83c\udde6 Vatican City<\/option>\n<option value=\"VE\">\ud83c\uddfb\ud83c\uddea Venezuela<\/option>\n<option value=\"VN\">\ud83c\uddfb\ud83c\uddf3 Vietnam<\/option>\n<option value=\"YE\">\ud83c\uddfe\ud83c\uddea Yemen<\/option>\n<option value=\"ZM\">\ud83c\uddff\ud83c\uddf2 Zambia<\/option>\n<option value=\"ZW\">\ud83c\uddff\ud83c\uddfc Zimbabwe<\/option><\/select>\n\n<!-- Gender Selection Modal -->\n<div id=\"genderSelectionModal\" style=\"display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:100001;align-items:center;justify-content:center;padding:20px;\">\n    <div style=\"background:rgba(18,18,24,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:20px;max-width:360px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.08);\">\n        <h3 style=\"margin:0 0 16px 0;color:rgba(255,255,255,0.7);font-size:14px;font-weight:700;text-align:center;letter-spacing:0.5px;\">SELECT GENDER<\/h3>\n\n        <div style=\"display:flex;flex-direction:column;gap:6px;\">\n            <button class=\"gender-option\" data-value=\"\" style=\"padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.15s;color:#fff;\">\n                <div style=\"width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,0.5)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n                <\/div>\n                <span style=\"font-weight:600;font-size:13px;\">Everyone<\/span>\n            <\/button>\n\n            <button class=\"gender-option\" data-value=\"male\" style=\"padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.15s;color:#fff;\">\n                <div style=\"width:28px;height:28px;border-radius:7px;background:rgba(96,165,250,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#60A5FA\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10\" cy=\"14\" r=\"5\"\/><line x1=\"19\" y1=\"5\" x2=\"13.6\" y2=\"10.4\"\/><line x1=\"19\" y1=\"5\" x2=\"14\" y2=\"5\"\/><line x1=\"19\" y1=\"5\" x2=\"19\" y2=\"10\"\/><\/svg>\n                <\/div>\n                <span style=\"font-weight:600;font-size:13px;\">Males Only<\/span>\n            <\/button>\n\n            <button class=\"gender-option\" data-value=\"female\" style=\"padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.15s;color:#fff;\">\n                <div style=\"width:28px;height:28px;border-radius:7px;background:rgba(244,114,182,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F472B6\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"5\"\/><line x1=\"12\" y1=\"13\" x2=\"12\" y2=\"21\"\/><line x1=\"9\" y1=\"18\" x2=\"15\" y2=\"18\"\/><\/svg>\n                <\/div>\n                <span style=\"font-weight:600;font-size:13px;\">Females Only<\/span>\n            <\/button>\n        <\/div>\n\n        <button onclick=\"closeGenderSelectionModal()\" style=\"width:100%;margin-top:12px;padding:10px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.08);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;\">\n            Cancel        <\/button>\n    <\/div>\n<\/div>\n\n<!-- Country Selection Modal -->\n<div id=\"countrySelectionModal\" style=\"display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:100001;align-items:center;justify-content:center;padding:20px;\">\n    <div style=\"background:rgba(18,18,24,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:20px;max-width:360px;width:100%;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.08);\">\n\n        <!-- Tab Switcher -->\n        <div id=\"countryModeTabs\" style=\"display:flex;gap:4px;margin-bottom:12px;background:rgba(255,255,255,0.04);border-radius:10px;padding:3px;\">\n            <button id=\"countryTabMatch\" class=\"country-tab active\" style=\"flex:1;padding:8px;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.8);\">Match With<\/button>\n            <button id=\"countryTabExclude\" class=\"country-tab\" style=\"flex:1;padding:8px;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;background:transparent;color:rgba(255,255,255,0.35);\">Exclude<\/button>\n        <\/div>\n\n        <div style=\"position:relative;margin-bottom:10px;\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,0.3)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\n            <input id=\"countrySearchInput\" type=\"text\" placeholder=\"Search countries...\" autocomplete=\"off\" style=\"width:100%;padding:10px 12px 10px 34px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;color:#fff;font-size:16px;font-family:inherit;font-weight:500;outline:none;box-sizing:border-box;transition:border-color 0.15s;\" onfocus=\"this.style.borderColor='rgba(255,255,255,0.2)'\" onblur=\"this.style.borderColor='rgba(255,255,255,0.08)'\" \/>\n        <\/div>\n\n        <!-- Match With mode (single-select) -->\n        <div id=\"countryOptionsContainer\" style=\"display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1;margin-bottom:12px;\">\n            <!-- Populated by JavaScript -->\n        <\/div>\n\n        <!-- Exclude mode (multi-select with checkboxes) -->\n        <div id=\"countryExcludeContainer\" style=\"display:none;flex-direction:column;gap:4px;overflow-y:auto;flex:1;margin-bottom:12px;\">\n            <!-- Populated by JavaScript -->\n        <\/div>\n\n        <button id=\"countryModalCloseBtn\" onclick=\"closeCountrySelectionModal()\" style=\"width:100%;padding:10px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.08);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;\">\n            Cancel        <\/button>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    \/\/ Lock tier state from PHP\n    var isLoggedIn = false;\n    var canUseFilters = false;\n\n    \/\/ Expose to window for spark store to update after purchase\n    window.matchPrefsIsLoggedIn = isLoggedIn;\n    window.matchPrefsCanUseFilters = canUseFilters;\n\n    var drawer = document.getElementById('matchPreferencesDrawer');\n    var drawerContent = document.getElementById('drawerContent');\n    var drawerBtn = document.getElementById('matchPreferencesBtn');\n    var drawerCloseBtn = document.getElementById('drawerCloseBtn');\n    var genderFilterCard = document.getElementById('genderFilterCard');\n    var countryFilterCard = document.getElementById('countryFilterCard');\n    var genderCardRight = document.getElementById('genderCardRight');\n    var countryCardRight = document.getElementById('countryCardRight');\n    var genderModal = document.getElementById('genderSelectionModal');\n    var countryModal = document.getElementById('countrySelectionModal');\n    var genderFilter = document.getElementById('genderFilter');\n    var countryFilter = document.getElementById('countryFilter');\n\n    \/\/ Apply locked styling based on tier\n    function applyLockState() {\n        if (canUseFilters) {\n            \/\/ Unlocked \u2014 full access\n            genderFilterCard.style.opacity = '1';\n            countryFilterCard.style.opacity = '1';\n            genderCardRight.innerHTML = '<span style=\"color:rgba(255,255,255,0.3);font-size:16px;\">\u203a<\/span>';\n            countryCardRight.innerHTML = '<span style=\"color:rgba(255,255,255,0.3);font-size:16px;\">\u203a<\/span>';\n        } else if (isLoggedIn) {\n            \/\/ Logged in but no pass \u2014 show price\n            genderFilterCard.style.opacity = '0.5';\n            countryFilterCard.style.opacity = '0.5';\n            var priceHTML = '<span style=\"color:#FBBF24;font-size:12px;font-weight:700;white-space:nowrap;\">100 \u26a1<\/span>';\n            genderCardRight.innerHTML = priceHTML;\n            countryCardRight.innerHTML = priceHTML;\n        } else {\n            \/\/ Anonymous \u2014 show login prompt\n            genderFilterCard.style.opacity = '0.5';\n            countryFilterCard.style.opacity = '0.5';\n            var loginHTML = '<span style=\"color:rgba(255,255,255,0.35);font-size:11px;font-weight:600;white-space:nowrap;\">Log in \u2192<\/span>';\n            genderCardRight.innerHTML = loginHTML;\n            countryCardRight.innerHTML = loginHTML;\n        }\n    }\n\n    applyLockState();\n\n    \/\/ Unlock cards after purchase (called from spark store)\n    window.unlockMatchPreferencesCards = function() {\n        canUseFilters = true;\n        window.matchPrefsCanUseFilters = true;\n        window.canUseFilters = true;\n        applyLockState();\n    };\n\n    \/\/ Open drawer\n    window.openMatchPreferencesDrawer = function() {\n        drawer.style.display = 'block';\n        drawer.offsetHeight; \/\/ reflow\n        drawer.style.opacity = '1';\n        drawerContent.style.transform = 'translateY(0)';\n        \/\/ Hide \"Try Me\" pill once drawer is opened\n        var pill = document.getElementById('filterTryMePill');\n        if (pill) pill.style.display = 'none';\n    };\n\n    \/\/ Close drawer\n    window.closeMatchPreferencesDrawer = function() {\n        drawer.style.opacity = '0';\n        drawerContent.style.transform = 'translateY(100%)';\n        setTimeout(function() {\n            drawer.style.display = 'none';\n        }, 300);\n    };\n\n    \/\/ Close button\n    if (drawerCloseBtn) {\n        drawerCloseBtn.addEventListener('click', closeMatchPreferencesDrawer);\n    }\n\n    \/\/ Open drawer on button click\n    if (drawerBtn) {\n        drawerBtn.addEventListener('click', openMatchPreferencesDrawer);\n    }\n\n    \/\/ Close on backdrop click\n    drawer.addEventListener('click', function(e) {\n        if (e.target === drawer) {\n            closeMatchPreferencesDrawer();\n        }\n    });\n\n    \/\/ Card click handler with lock tier check\n    function handleCardClick(type) {\n        if (!isLoggedIn) {\n            \/\/ Anonymous \u2192 close drawer, redirect to login\n            closeMatchPreferencesDrawer();\n            window.location.href = '\/login';\n            return;\n        }\n\n        \/\/ Check window.canUseFilters for live state (updated by spark store)\n        if (!window.canUseFilters && !canUseFilters) {\n            \/\/ Logged in but no pass \u2192 close drawer, open spark store\n            closeMatchPreferencesDrawer();\n            if (typeof openSparkStoreModal === 'function') {\n                openSparkStoreModal();\n            }\n            return;\n        }\n\n        \/\/ Unlocked \u2192 open selection modal\n        if (type === 'gender') {\n            genderModal.style.display = 'flex';\n        } else {\n            var container = document.getElementById('countryOptionsContainer');\n            if (container.children.length === 0) {\n                populateCountryOptions();\n            }\n            populateExcludeOptions();\n            updateExcludeCheckboxes();\n            \/\/ Set correct tab state\n            setCountryTab(countryMode);\n            \/\/ Reset search and show all\n            var searchInput = document.getElementById('countrySearchInput');\n            if (searchInput) {\n                searchInput.value = '';\n                filterCountryOptions('');\n                setTimeout(function() { searchInput.focus(); }, 100);\n            }\n            countryModal.style.display = 'flex';\n        }\n    }\n\n    genderFilterCard.addEventListener('click', function() {\n        handleCardClick('gender');\n    });\n\n    countryFilterCard.addEventListener('click', function() {\n        handleCardClick('country');\n    });\n\n    \/\/ Close modals\n    window.closeGenderSelectionModal = function() {\n        genderModal.style.display = 'none';\n    };\n\n    window.closeCountrySelectionModal = function() {\n        countryModal.style.display = 'none';\n    };\n\n    \/\/ Backdrop close for modals\n    genderModal.addEventListener('click', function(e) {\n        if (e.target === genderModal) closeGenderSelectionModal();\n    });\n\n    countryModal.addEventListener('click', function(e) {\n        if (e.target === countryModal) closeCountrySelectionModal();\n    });\n\n    \/\/ Handle gender selection\n    document.querySelectorAll('.gender-option').forEach(function(option) {\n        option.addEventListener('click', function() {\n            var value = this.getAttribute('data-value');\n            genderFilter.value = value;\n            genderFilter.dispatchEvent(new Event('change'));\n            updateGenderDisplay(value);\n            closeGenderSelectionModal();\n        });\n    });\n\n    \/\/ Update gender display \u2014 swap icon SVG + label\n    var genderIcons = {\n        '': '<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,0.5)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>',\n        'male': '<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#60A5FA\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"10\" cy=\"14\" r=\"5\"\/><line x1=\"19\" y1=\"5\" x2=\"13.6\" y2=\"10.4\"\/><line x1=\"19\" y1=\"5\" x2=\"14\" y2=\"5\"\/><line x1=\"19\" y1=\"5\" x2=\"19\" y2=\"10\"\/><\/svg>',\n        'female': '<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F472B6\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"8\" r=\"5\"\/><line x1=\"12\" y1=\"13\" x2=\"12\" y2=\"21\"\/><line x1=\"9\" y1=\"18\" x2=\"15\" y2=\"18\"\/><\/svg>'\n    };\n    function updateGenderDisplay(value) {\n        var iconEl = document.getElementById('genderFilterIcon');\n        var label = document.getElementById('genderFilterLabel');\n        if (genderIcons[value] !== undefined) {\n            iconEl.innerHTML = genderIcons[value];\n        }\n        if (value === 'male') {\n            label.textContent = 'Males Only';\n        } else if (value === 'female') {\n            label.textContent = 'Females Only';\n        } else {\n            label.textContent = 'Everyone';\n        }\n    }\n\n    \/\/ =====================================================================\n    \/\/ COUNTRY MODE: \"match\" (single-select) vs \"exclude\" (multi-select)\n    \/\/ =====================================================================\n    var countryMode = 'match'; \/\/ 'match' or 'exclude'\n    var countryExclusions = []; \/\/ array of excluded country codes\n\n    \/\/ Load saved exclusions from localStorage\n    function loadCountryExclusions() {\n        try {\n            var raw = localStorage.getItem('meetgle_country_exclusions');\n            if (raw) return JSON.parse(raw);\n        } catch (e) {}\n        return [];\n    }\n    function saveCountryExclusions(list) {\n        try { localStorage.setItem('meetgle_country_exclusions', JSON.stringify(list)); } catch (e) {}\n    }\n    function loadCountryMode() {\n        try { return localStorage.getItem('meetgle_country_mode') || 'match'; } catch (e) { return 'match'; }\n    }\n    function saveCountryMode(mode) {\n        try { localStorage.setItem('meetgle_country_mode', mode); } catch (e) {}\n    }\n\n    \/\/ Expose exclusions globally for videochat.js to read\n    window.getCountryExclusions = function() { return countryExclusions; };\n    window.getCountryMode = function() { return countryMode; };\n\n    \/\/ Tab switching\n    var tabMatch = document.getElementById('countryTabMatch');\n    var tabExclude = document.getElementById('countryTabExclude');\n    var matchContainer = document.getElementById('countryOptionsContainer');\n    var excludeContainer = document.getElementById('countryExcludeContainer');\n\n    function setCountryTab(mode) {\n        countryMode = mode;\n        saveCountryMode(mode);\n        var closeBtn = document.getElementById('countryModalCloseBtn');\n        if (mode === 'match') {\n            tabMatch.style.background = 'rgba(255,255,255,0.1)';\n            tabMatch.style.color = 'rgba(255,255,255,0.8)';\n            tabExclude.style.background = 'transparent';\n            tabExclude.style.color = 'rgba(255,255,255,0.35)';\n            matchContainer.style.display = 'flex';\n            excludeContainer.style.display = 'none';\n            \/\/ Clear exclusions when switching to match mode\n            countryExclusions = [];\n            saveCountryExclusions([]);\n            updateExcludeCheckboxes();\n            if (closeBtn) closeBtn.textContent = 'Cancel';\n        } else {\n            tabExclude.style.background = 'rgba(255,255,255,0.1)';\n            tabExclude.style.color = 'rgba(255,255,255,0.8)';\n            tabMatch.style.background = 'transparent';\n            tabMatch.style.color = 'rgba(255,255,255,0.35)';\n            matchContainer.style.display = 'none';\n            excludeContainer.style.display = 'flex';\n            \/\/ Clear single-country preference when switching to exclude mode\n            countryFilter.value = '';\n            countryFilter.dispatchEvent(new Event('change'));\n            if (closeBtn) closeBtn.textContent = countryExclusions.length > 0 ? 'Done' : 'Cancel';\n        }\n        updateCountryDisplay();\n    }\n\n    tabMatch.addEventListener('click', function() { setCountryTab('match'); });\n    tabExclude.addEventListener('click', function() { setCountryTab('exclude'); });\n\n    \/\/ Populate country options (match mode \u2014 single-select)\n    function populateCountryOptions() {\n        var container = document.getElementById('countryOptionsContainer');\n        var options = countryFilter.querySelectorAll('option');\n\n        options.forEach(function(option) {\n            var btn = document.createElement('button');\n            btn.className = 'country-option';\n            btn.setAttribute('data-value', option.value);\n            btn.setAttribute('data-name', option.textContent.toLowerCase());\n            btn.style.cssText = 'padding:10px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;cursor:pointer;text-align:left;transition:background 0.15s;color:#fff;font-size:13px;font-weight:600;width:100%;';\n            btn.textContent = option.textContent;\n\n            btn.addEventListener('click', function() {\n                var val = this.getAttribute('data-value');\n                countryFilter.value = val;\n                countryFilter.dispatchEvent(new Event('change'));\n                updateCountryDisplay();\n                closeCountrySelectionModal();\n            });\n\n            container.appendChild(btn);\n        });\n    }\n\n    \/\/ Populate exclude options (exclude mode \u2014 multi-select with checkboxes)\n    function populateExcludeOptions() {\n        var container = document.getElementById('countryExcludeContainer');\n        if (container.children.length > 0) return; \/\/ already populated\n\n        var options = countryFilter.querySelectorAll('option');\n        options.forEach(function(option) {\n            if (!option.value) return; \/\/ skip \"All Countries\"\n\n            var btn = document.createElement('button');\n            btn.className = 'country-exclude-option';\n            btn.setAttribute('data-value', option.value);\n            btn.setAttribute('data-name', option.textContent.toLowerCase());\n            btn.style.cssText = 'padding:10px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;cursor:pointer;text-align:left;transition:all 0.15s;color:#fff;width:100%;box-sizing:border-box;';\n\n            var row = document.createElement('div');\n            row.style.cssText = 'display:flex;align-items:center;gap:10px;';\n\n            var checkbox = document.createElement('span');\n            checkbox.className = 'exclude-checkbox';\n            checkbox.style.cssText = 'width:16px;height:16px;min-width:16px;border-radius:4px;border:1.5px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;font-size:9px;';\n\n            var label = document.createElement('span');\n            label.textContent = option.textContent;\n            label.style.cssText = 'font-size:13px;font-weight:600;';\n\n            row.appendChild(checkbox);\n            row.appendChild(label);\n            btn.appendChild(row);\n\n            btn.addEventListener('click', function() {\n                var val = this.getAttribute('data-value');\n                var idx = countryExclusions.indexOf(val);\n                if (idx === -1) {\n                    countryExclusions.push(val);\n                } else {\n                    countryExclusions.splice(idx, 1);\n                }\n                saveCountryExclusions(countryExclusions);\n                updateExcludeCheckboxes();\n                updateCountryDisplay();\n            });\n\n            container.appendChild(btn);\n        });\n    }\n\n    \/\/ Update checkbox visuals\n    function updateExcludeCheckboxes() {\n        var buttons = document.querySelectorAll('.country-exclude-option');\n        buttons.forEach(function(btn) {\n            var val = btn.getAttribute('data-value');\n            var cb = btn.querySelector('.exclude-checkbox');\n            if (countryExclusions.indexOf(val) !== -1) {\n                cb.style.background = '#EF4444';\n                cb.style.borderColor = '#EF4444';\n                cb.innerHTML = '\u2715';\n                cb.style.color = 'white';\n                btn.style.borderColor = 'rgba(239,68,68,0.2)';\n                btn.style.background = 'rgba(239,68,68,0.06)';\n            } else {\n                cb.style.background = 'transparent';\n                cb.style.borderColor = 'rgba(255,255,255,0.15)';\n                cb.innerHTML = '';\n                btn.style.borderColor = 'rgba(255,255,255,0.08)';\n                btn.style.background = 'rgba(255,255,255,0.04)';\n            }\n        });\n\n        \/\/ Update close button text\n        var closeBtn = document.getElementById('countryModalCloseBtn');\n        if (closeBtn) {\n            if (countryMode === 'exclude' && countryExclusions.length > 0) {\n                closeBtn.textContent = 'Done';\n            } else {\n                closeBtn.textContent = 'Cancel';\n            }\n        }\n    }\n\n    \/\/ Filter country options by search query (works for both containers)\n    function filterCountryOptions(query) {\n        var q = query.toLowerCase().trim();\n        var matchBtns = document.querySelectorAll('#countryOptionsContainer .country-option');\n        var excludeBtns = document.querySelectorAll('#countryExcludeContainer .country-exclude-option');\n        matchBtns.forEach(function(btn) {\n            var name = btn.getAttribute('data-name') || '';\n            btn.style.display = (!q || name.indexOf(q) !== -1) ? '' : 'none';\n        });\n        excludeBtns.forEach(function(btn) {\n            var name = btn.getAttribute('data-name') || '';\n            btn.style.display = (!q || name.indexOf(q) !== -1) ? '' : 'none';\n        });\n    }\n\n    \/\/ Wire up search input\n    var countrySearchInput = document.getElementById('countrySearchInput');\n    if (countrySearchInput) {\n        countrySearchInput.addEventListener('input', function() {\n            filterCountryOptions(this.value);\n        });\n    }\n\n    \/\/ Update country display \u2014 swap icon to flag emoji or globe SVG\n    var globeSVG = '<svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"rgba(255,255,255,0.5)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>';\n    function updateCountryDisplay() {\n        var iconEl = document.getElementById('countryFilterIcon');\n        var label = document.getElementById('countryFilterLabel');\n\n        if (countryMode === 'exclude' && countryExclusions.length > 0) {\n            \/\/ Show exclude count\n            iconEl.innerHTML = '<span style=\"font-size:14px;line-height:1;color:#EF4444;\">\u2298<\/span>';\n            label.textContent = 'Excluding ' + countryExclusions.length;\n        } else if (countryFilter.value) {\n            var option = countryFilter.querySelector('option[value=\"' + countryFilter.value + '\"]');\n            if (option) {\n                var text = option.textContent;\n                var flag = text.split(' ')[0];\n                iconEl.innerHTML = '<span style=\"font-size:18px;line-height:1;\">' + flag + '<\/span>';\n                label.textContent = text.substring(flag.length).trim();\n            }\n        } else {\n            iconEl.innerHTML = globeSVG;\n            label.textContent = 'All Countries';\n        }\n    }\n\n    \/\/ Listen for filter initialization from main JS\n    window.addEventListener('filtersInitialized', function() {\n        if (genderFilter) {\n            updateGenderDisplay(genderFilter.value);\n            genderFilter.addEventListener('change', function() {\n                updateGenderDisplay(genderFilter.value);\n            });\n        }\n\n        \/\/ Load saved country mode and exclusions\n        countryMode = loadCountryMode();\n        countryExclusions = loadCountryExclusions();\n\n        if (countryFilter) {\n            \/\/ If in exclude mode, clear any single-country preference\n            if (countryMode === 'exclude') {\n                countryFilter.value = '';\n            }\n            updateCountryDisplay();\n            countryFilter.addEventListener('change', function() {\n                updateCountryDisplay();\n            });\n        }\n    });\n\n    \/\/ Escape key\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape') {\n            if (genderModal.style.display === 'flex') closeGenderSelectionModal();\n            if (countryModal.style.display === 'flex') closeCountrySelectionModal();\n            if (drawer.style.opacity === '1') closeMatchPreferencesDrawer();\n        }\n    });\n})();\n<\/script>\n\n<style>\n\/* Card hover states *\/\n.mp-card:hover { background: rgba(255,255,255,0.06) !important; }\n\n\/* Gender\/country option hover *\/\n.gender-option:hover,\n.country-option:hover { background: rgba(255,255,255,0.08) !important; }\n\n\/* Smooth scrollbar for country lists *\/\n#countryOptionsContainer::-webkit-scrollbar,\n#countryExcludeContainer::-webkit-scrollbar { width: 6px; }\n#countryOptionsContainer::-webkit-scrollbar-track,\n#countryExcludeContainer::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 3px; }\n#countryOptionsContainer::-webkit-scrollbar-thumb,\n#countryExcludeContainer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }\n#countryOptionsContainer::-webkit-scrollbar-thumb:hover,\n#countryExcludeContainer::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }\n#countryOptionsContainer { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) rgba(255,255,255,0.03); }\n#countryExcludeContainer { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) rgba(255,255,255,0.03); }\n\n\/* Exclude option hover *\/\n.country-exclude-option:hover { background: rgba(255,255,255,0.08) !important; }\n\n\/* Mobile optimizations *\/\n@media (max-width: 768px) {\n    #drawerContent {\n        padding: 20px !important;\n        border-top-left-radius: 18px !important;\n        border-top-right-radius: 18px !important;\n    }\n}\n<\/style>\n\n        <!-- Profile Modal -->\n        \n<!-- Profile Modal Container -->\n<div id=\"meetgleProfileModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content profile-modal-content\" style=\"max-width:700px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <div class=\"meetgle-profile-modal-body\">\n            <!-- Loading State -->\n            <div class=\"meetgle-profile-loading\" id=\"profileLoading\">\n                <div class=\"profile-spinner\"><\/div>\n                <p>Loading profile...<\/p>\n            <\/div>\n\n            <!-- Error State -->\n            <div class=\"meetgle-profile-error\" id=\"profileError\" style=\"display:none;\">\n                <p id=\"profileErrorMessage\"><\/p>\n            <\/div>\n\n            <!-- Profile Content -->\n            <div class=\"meetgle-profile-content\" id=\"profileContent\" style=\"display:none;\">\n\n                <!-- Close button -->\n                <button onclick=\"closeMeetgleProfileModal()\" class=\"profile-close-btn\">&times;<\/button>\n\n                <!-- Hero: Avatar left, Identity right -->\n                <div class=\"profile-hero\">\n                    <img decoding=\"async\" id=\"profileAvatar\" src=\"\" alt=\"Avatar\" class=\"profile-hero-avatar\">\n                    <div class=\"profile-hero-info\">\n                        <h2 id=\"profileUsername\" class=\"profile-hero-name\"><\/h2>\n                        <div class=\"profile-hero-meta\">\n                            <span id=\"profileGenderBadge\" class=\"profile-meta-chip\"><\/span>\n                            <span id=\"profileAge\" class=\"profile-meta-chip\"><\/span>\n                            <span id=\"profileCountryFlag\" class=\"profile-meta-chip\"><\/span>\n                            <button id=\"profileFavoriteBtn\" onclick=\"toggleProfileFavorite()\" class=\"profile-meta-chip profile-fav-chip\" style=\"display:none;cursor:pointer;\" title=\"Add to favorites\">\n                                <span id=\"profileFavoriteIcon\" style=\"font-size:12px;\">\ud83e\udd0d<\/span>\n                                <span id=\"profileFavoriteText\" style=\"font-size:12px;font-weight:600;\">Favorite<\/span>\n                            <\/button>\n                        <\/div>\n                        <div id=\"profileLookingFor\" class=\"profile-hero-lookingfor\"><\/div>\n                        <div class=\"profile-badges\" id=\"profileBadges\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Action Buttons -->\n                <div class=\"profile-actions\">\n                    <button id=\"sendSparksBtn\" onclick=\"openSendSparksModal()\" class=\"profile-action-btn\" style=\"display:none;\">\u26a1 Send Sparks<\/button>\n                    <button id=\"sendStickersBtn\" onclick=\"openSendStickersModal()\" class=\"profile-action-btn\" style=\"display:none;\">\ud83c\udf81 Send Sticker<\/button>\n                    <button id=\"sendMessageBtn\" onclick=\"startConversationFromProfile()\" class=\"profile-action-btn\" style=\"display:none;\">\ud83d\udcac Message<\/button>\n                <\/div>\n\n                <!-- Scrollable Content -->\n                <div class=\"profile-scroll-content\">\n\n                    <!-- Bio Section -->\n                    <div class=\"profile-section\" id=\"profileBioSection\">\n                        <div class=\"profile-section-header\">\n                            <div class=\"profile-section-dot\" style=\"background:#3B82F6;\"><\/div>\n                            <span>About<\/span>\n                        <\/div>\n                        <div class=\"profile-bio-card\">\n                            <p id=\"profileBio\"><\/p>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Photos Gallery -->\n                    <div id=\"profilePhotosSection\" class=\"profile-section\" style=\"display:none;\">\n                        <div class=\"profile-section-header\">\n                            <div class=\"profile-section-dot\" style=\"background:#EC4899;\"><\/div>\n                            <span>Photos<\/span>\n                            <span id=\"profilePhotoCount\" class=\"profile-photo-count\"><\/span>\n                        <\/div>\n                        <div class=\"profile-photos-wrap\">\n                            <div id=\"profilePhotosGrid\" class=\"profile-photos-scroll\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Interests Section -->\n                    <div class=\"profile-section\" id=\"profileInterestsSection\">\n                        <div class=\"profile-section-header\">\n                            <div class=\"profile-section-dot\" style=\"background:#10B981;\"><\/div>\n                            <span>Interests<\/span>\n                        <\/div>\n                        <div class=\"profile-interests\" id=\"profileInterests\"><\/div>\n                    <\/div>\n\n                    <!-- Activity Stats -->\n                    <div class=\"profile-section\">\n                        <div class=\"profile-section-header\">\n                            <div class=\"profile-section-dot\" style=\"background:#F59E0B;\"><\/div>\n                            <span>Activity<\/span>\n                        <\/div>\n                        <div class=\"profile-stats-scroll\">\n                            <div class=\"profile-stat-card\">\n                                <div class=\"stat-emoji\">\u26a1<\/div>\n                                <div id=\"profileLifetimeEarned\" class=\"stat-val\">0<\/div>\n                                <div class=\"stat-lbl\">Lifetime<\/div>\n                            <\/div>\n                            <div class=\"profile-stat-card\">\n                                <div class=\"stat-emoji\">\ud83d\udcc8<\/div>\n                                <div id=\"profileWeeklyEarned\" class=\"stat-val\">0<\/div>\n                                <div class=\"stat-lbl\">This Week<\/div>\n                            <\/div>\n                            <div class=\"profile-stat-card\" id=\"profileRankStat\" style=\"display:none;\">\n                                <div class=\"stat-emoji\">\ud83c\udfc6<\/div>\n                                <div id=\"profileRank\" class=\"stat-val\" style=\"color:#F59E0B;\">-<\/div>\n                                <div class=\"stat-lbl\">Rank<\/div>\n                            <\/div>\n                            <div class=\"profile-stat-card\">\n                                <div class=\"stat-emoji\">\ud83d\udcc5<\/div>\n                                <div id=\"profileMemberSince\" class=\"stat-val\"><\/div>\n                                <div class=\"stat-lbl\">Joined<\/div>\n                            <\/div>\n                            <div class=\"profile-stat-card\" id=\"profileLastChatStat\" style=\"display:none;\">\n                                <div class=\"stat-emoji\">\ud83d\udcac<\/div>\n                                <div id=\"profileLastChat\" class=\"stat-val\">-<\/div>\n                                <div class=\"stat-lbl\">Last Chat<\/div>\n                            <\/div>\n                            <div class=\"profile-stat-card\" id=\"profileTotalChatStat\" style=\"display:none;\">\n                                <div class=\"stat-emoji\">\u23f1\ufe0f<\/div>\n                                <div id=\"profileTotalChatTime\" class=\"stat-val\">0m<\/div>\n                                <div class=\"stat-lbl\">Chat Time<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Send Sparks Section (hidden, used by legacy JS) -->\n                    <div id=\"sendSparksSection\" style=\"display:none;margin-top:16px;\">\n                        <button onclick=\"openSendSparksModal()\" style=\"width:100%;background:#F59E0B;color:#000;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;\">\u26a1 Send Sparks<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* ===== PUBLIC PROFILE MODAL ===== *\/\n\n\/* Close button *\/\n.profile-close-btn {\n    position: absolute;\n    top: 20px;\n    right: 20px;\n    background: rgba(255,255,255,0.08);\n    border: 1px solid rgba(255,255,255,0.1);\n    color: rgba(255,255,255,0.5);\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    font-size: 22px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.2s;\n    z-index: 10;\n    padding: 0;\n    line-height: 0;\n    font-weight: 300;\n}\n.profile-close-btn:hover {\n    background: rgba(255,255,255,0.15);\n    color: white;\n}\n\n\/* Hero Section \u2014 avatar left, info right *\/\n.profile-hero {\n    display: flex;\n    align-items: flex-start;\n    gap: 20px;\n    padding: 28px 28px 0 28px;\n}\n.profile-hero-avatar {\n    width: 100px !important;\n    height: 100px !important;\n    border-radius: 50% !important;\n    object-fit: cover;\n    border: 3px solid rgba(255,255,255,0.25) !important;\n    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;\n    flex-shrink: 0;\n}\n.profile-hero-info {\n    flex: 1;\n    min-width: 0;\n    padding-top: 2px;\n}\n.profile-hero-name {\n    color: white;\n    margin: 0 0 8px 0;\n    font-size: 24px;\n    font-weight: 800;\n    line-height: 1.2;\n    padding-right: 44px;\n}\n\n\/* Meta chips (gender \/ age \/ country) *\/\n.profile-hero-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 6px;\n}\n.profile-meta-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 10px;\n    background: rgba(255,255,255,0.06);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 10px;\n    font-size: 13px;\n    line-height: 1.4;\n}\n\n\/* Looking for subtitle *\/\n.profile-hero-lookingfor {\n    font-size: 13px;\n    margin-bottom: 6px;\n    line-height: 1.4;\n}\n\n\/* Favorite chip (in hero meta row) *\/\n.profile-fav-chip {\n    background: rgba(255,255,255,0.06);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 10px;\n    padding: 3px 10px;\n    transition: all 0.2s;\n    color: rgba(255,255,255,0.6);\n}\n.profile-fav-chip:hover {\n    background: rgba(236,72,153,0.12);\n    border-color: rgba(236,72,153,0.25);\n}\n\n\/* Action buttons bar *\/\n.profile-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    padding: 16px 28px;\n    border-bottom: 1px solid rgba(255,255,255,0.06);\n}\n.profile-action-btn {\n    background: rgba(255,255,255,0.05);\n    border: 1px solid rgba(255,255,255,0.1);\n    color: rgba(255,255,255,0.7);\n    border-radius: 12px;\n    padding: 0 18px;\n    height: 40px;\n    line-height: 40px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n.profile-action-btn:hover {\n    background: rgba(255,255,255,0.1);\n    border-color: rgba(255,255,255,0.2);\n    color: white;\n}\n\n\/* Scrollable content area *\/\n.profile-scroll-content {\n    padding: 20px 28px 28px 28px;\n    max-height: calc(80vh - 220px);\n    overflow-y: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.profile-scroll-content::-webkit-scrollbar { display: none; }\n\n\/* Section structure *\/\n.profile-modal-content .profile-section { margin-bottom: 24px; }\n.profile-modal-content .profile-section:last-child { margin-bottom: 0; }\n.profile-section-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 12px;\n}\n.profile-section-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n.profile-section-header > span {\n    color: rgba(255,255,255,0.45);\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\/* Bio card *\/\n.profile-bio-card {\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 14px;\n    padding: 16px 18px;\n}\n.profile-bio-card p {\n    margin: 0;\n    color: rgba(255,255,255,0.7);\n    line-height: 1.6;\n    font-size: 14px;\n}\n\n\/* Photo count badge *\/\n.profile-photo-count {\n    margin-left: auto;\n    font-size: 11px;\n    font-weight: 600;\n    color: rgba(255,255,255,0.35);\n    background: rgba(255,255,255,0.06);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 10px;\n    padding: 2px 8px;\n    line-height: 1.4;\n}\n\n\/* Photos \u2014 horizontal scroll strip *\/\n.profile-photos-wrap {\n    position: relative;\n}\n.profile-photos-wrap::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 4px;\n    width: 48px;\n    background: linear-gradient(to right, transparent, rgba(20,20,30,0.95));\n    pointer-events: none;\n    z-index: 2;\n    border-radius: 0 14px 14px 0;\n    opacity: 1;\n    transition: opacity 0.2s;\n}\n.profile-photos-wrap.scrolled-end::after {\n    opacity: 0;\n}\n.profile-photos-scroll {\n    display: flex;\n    overflow-x: auto;\n    gap: 10px;\n    padding-bottom: 4px;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.profile-photos-scroll::-webkit-scrollbar { display: none; }\n.profile-photos-scroll .profile-photo-card {\n    min-width: 180px;\n    width: 180px;\n    aspect-ratio: 4\/5;\n    border-radius: 14px;\n    overflow: hidden;\n    cursor: pointer;\n    transition: transform 0.2s, box-shadow 0.2s;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(255,255,255,0.08);\n    flex-shrink: 0;\n    position: relative;\n}\n.profile-photos-scroll .profile-photo-card:hover {\n    transform: scale(1.03);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.3);\n}\n.profile-photos-scroll .profile-photo-card img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n\/* Photo lock overlay *\/\n.photo-lock-overlay {\n    position: absolute;\n    top: 0; left: 0; right: 0; bottom: 0;\n    background: rgba(0,0,0,0.55);\n    backdrop-filter: blur(2px);\n    -webkit-backdrop-filter: blur(2px);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n.photo-lock-overlay .lock-price { font-size: 18px; font-weight: 800; color: #F59E0B; }\n.photo-lock-overlay .lock-text { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 4px; }\n\n\/* Photo skeleton loading *\/\n.profile-photo-card.photo-skeleton { background: rgba(255,255,255,0.04); cursor: default; }\n.profile-photo-card.photo-skeleton:hover { transform: none; box-shadow: none; }\n.photo-skeleton-shimmer {\n    width: 100%; height: 100%;\n    background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.02) 100%);\n    background-size: 200% 100%;\n    animation: profileShimmer 1.5s ease-in-out infinite;\n}\n@keyframes profileShimmer {\n    0% { background-position: 200% 0; }\n    100% { background-position: -200% 0; }\n}\n\n\/* Stats \u2014 horizontal scroll *\/\n.profile-stats-scroll {\n    display: flex;\n    overflow-x: auto;\n    gap: 10px;\n    padding-bottom: 4px;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.profile-stats-scroll::-webkit-scrollbar { display: none; }\n.profile-stat-card {\n    min-width: 120px;\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 14px;\n    padding: 14px;\n    flex-shrink: 0;\n    transition: background 0.15s;\n}\n.profile-stat-card:hover { background: rgba(255,255,255,0.06); }\n.stat-emoji { font-size: 18px; margin-bottom: 6px; }\n.stat-val { font-size: 17px; font-weight: 800; color: white; margin-bottom: 2px; }\n.stat-lbl {\n    font-size: 10px;\n    color: rgba(255,255,255,0.4);\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.3px;\n}\n\n\/* Interest tags (dark override) *\/\n.profile-modal-content .profile-interest-tag {\n    padding: 6px 14px;\n    background: rgba(255,255,255,0.06);\n    border: 1px solid rgba(255,255,255,0.1);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: rgba(255,255,255,0.7);\n    transition: background 0.15s;\n}\n.profile-modal-content .profile-interest-tag:hover {\n    background: rgba(255,255,255,0.1);\n    transform: none;\n    box-shadow: none;\n}\n\n\/* Badge (external user) *\/\n.profile-modal-content .profile-badge.external {\n    background: rgba(245,158,11,0.12);\n    color: #F59E0B;\n    border: 1px solid rgba(245,158,11,0.2);\n    backdrop-filter: none;\n    font-size: 12px;\n    padding: 4px 12px;\n    border-radius: 16px;\n}\n\n\/* Profile spinner (dark) *\/\n.profile-spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid rgba(255,255,255,0.1);\n    border-top-color: rgba(255,255,255,0.5);\n    border-radius: 50%;\n    animation: profileSpin 0.8s linear infinite;\n    margin: 0 auto 12px;\n}\n@keyframes profileSpin { to { transform: rotate(360deg); } }\n\n\/* Mobile fullscreen *\/\n@media (max-width: 900px) {\n    #meetgleProfileModal { padding: 0 !important; }\n    #meetgleProfileModal > .profile-modal-content {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        height: 100vh !important;\n        height: 100svh !important;\n        max-height: 100vh !important;\n        max-height: 100svh !important;\n        border-radius: 0 !important;\n    }\n    .profile-hero {\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n    }\n    .profile-hero-meta { justify-content: center; }\n    .profile-hero-lookingfor { text-align: center; }\n    .profile-hero-name { padding-right: 0; }\n    .profile-actions { justify-content: center; }\n    .profile-scroll-content {\n        max-height: calc(100svh - 320px) !important;\n    }\n}\n\n\/* ===== SHARED STYLES (sparks \/ stickers modals) ===== *\/\n\n\/* Hide scrollbars on send sparks\/stickers modals *\/\n.send-sparks-modal-content,\n.send-stickers-modal-content {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.send-sparks-modal-content::-webkit-scrollbar,\n.send-stickers-modal-content::-webkit-scrollbar {\n    display: none;\n}\n\n\/* Send sparks quick buttons \u2014 dark theme *\/\n.spark-amount-btn {\n    background: rgba(255,255,255,0.04);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 12px;\n    padding: 12px 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    font-weight: 600;\n    font-size: 15px;\n    color: rgba(255,255,255,0.7);\n}\n.spark-amount-btn:hover {\n    background: rgba(255,255,255,0.08) !important;\n    border-color: rgba(245,158,11,0.4) !important;\n    color: white !important;\n    transform: scale(1.05);\n}\n.spark-amount-btn.selected {\n    background: #F59E0B !important;\n    border-color: #F59E0B !important;\n    color: #000 !important;\n    box-shadow: 0 2px 12px rgba(245,158,11,0.3);\n}\n\n@keyframes pulse-sticker {\n    0%, 100% { transform: scale(1); opacity: 0.9; }\n    50% { transform: scale(1.08); opacity: 1; }\n}\n\n\/* Sticker Grid \u2014 dark theme *\/\n.sticker-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 10px;\n    max-height: 320px;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 4px;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.sticker-grid::-webkit-scrollbar { display: none; }\n\n.sticker-item {\n    aspect-ratio: 1;\n    border-radius: 14px;\n    border: 1px solid rgba(255,255,255,0.08);\n    background: rgba(255,255,255,0.04);\n    cursor: pointer;\n    transition: all 0.2s;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 6px;\n    position: relative;\n    min-width: 0;\n}\n.sticker-item:hover {\n    border-color: rgba(236,72,153,0.4);\n    background: rgba(255,255,255,0.08);\n    transform: scale(1.03);\n}\n.sticker-item.selected {\n    border-color: #EC4899;\n    background: rgba(236,72,153,0.15);\n    box-shadow: 0 0 16px rgba(236,72,153,0.2);\n}\n.sticker-item img {\n    width: 100%;\n    height: 60%;\n    object-fit: contain;\n    flex-shrink: 0;\n}\n.sticker-item .sticker-name {\n    font-size: 9px;\n    color: rgba(255,255,255,0.4);\n    text-align: center;\n    margin-top: 4px;\n    font-weight: 500;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    line-height: 1.2;\n}\n<\/style>\n\n<!-- Edit Profile Modal -->\n<div id=\"meetgleEditProfileModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content edit-profile-modal-content\" style=\"max-width:700px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <div class=\"meetgle-profile-modal-body\" style=\"position:relative;\">\n            <!-- Loading Overlay -->\n            <div id=\"editProfileLoadingOverlay\" style=\"position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(20,20,30,0.98);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;\">\n                <div class=\"profile-spinner\" style=\"width:40px;height:40px;border:3px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.6);border-radius:50%;animation:spin 0.8s linear infinite;margin-bottom:16px;\"><\/div>\n                <p style=\"margin:0;color:rgba(255,255,255,0.4);font-size:14px;font-weight:500;\">Loading your profile...<\/p>\n            <\/div>\n\n            <!-- Saving State -->\n            <div class=\"meetgle-profile-loading\" id=\"editProfileLoading\" style=\"display:none;\">\n                <div class=\"profile-spinner\" style=\"width:40px;height:40px;border:3px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.6);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 16px;\"><\/div>\n                <p style=\"color:rgba(255,255,255,0.4);font-size:14px;\">Saving changes...<\/p>\n            <\/div>\n\n            <!-- Edit Profile Content -->\n            <div id=\"editProfileContent\">\n                <!-- Header -->\n                <div style=\"padding:20px 20px 0 20px;\">\n                    <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;\">\n                        <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Edit Profile<\/h2>\n                        <button onclick=\"closeEditProfileModal()\" style=\"background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);width:32px;height:32px;border-radius:50%;font-size:18px;line-height:0;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.15)';this.style.color='white'\" onmouseout=\"this.style.background='rgba(255,255,255,0.08)';this.style.color='rgba(255,255,255,0.5)'\">&times;<\/button>\n                    <\/div>\n\n                    <!-- Avatar Row -->\n                    <div style=\"display:flex;align-items:center;gap:16px;margin-bottom:20px;\">\n                        <div style=\"position:relative;flex-shrink:0;\">\n                            <img decoding=\"async\" id=\"editProfileAvatar\" src=\"\" alt=\"Avatar\" style=\"width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.15);box-shadow:0 8px 24px rgba(0,0,0,0.3);\">\n                            <label for=\"avatarUploadInput\" style=\"position:absolute;bottom:0;right:0;background:rgba(255,255,255,0.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);color:white;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;\">\n                                <span style=\"font-size:14px;line-height:1;\">\ud83d\udcf7<\/span>\n                            <\/label>\n                            <input type=\"file\" id=\"avatarUploadInput\" accept=\"image\/*\" style=\"display:none;\" onchange=\"handleAvatarUpload(event)\">\n                        <\/div>\n                        <div>\n                            <h3 id=\"editProfileUsername\" style=\"color:white;margin:0 0 4px 0;font-size:18px;font-weight:700;\"><\/h3>\n                            <p style=\"color:rgba(255,255,255,0.4);font-size:13px;margin:0;\">Tap the camera to change your photo<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Form Content -->\n                <div style=\"padding:0 20px 20px 20px;\">\n\n                    <!-- Avatar Upload Status -->\n                    <div id=\"avatarUploadStatus\" style=\"display:none;margin-bottom:16px;padding:12px;border-radius:12px;font-size:13px;text-align:center;\"><\/div>\n\n                    <!-- Gender Section -->\n                    <div class=\"profile-section\" style=\"margin-bottom:16px;\">\n                        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                            <div style=\"width:6px;height:6px;border-radius:50%;background:#EC4899;\"><\/div>\n                            <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">Gender<\/span>\n                        <\/div>\n                        <p style=\"font-size:12px;color:rgba(255,255,255,0.35);margin:0 0 10px 0;\">This is YOUR gender (not who you want to match with)<\/p>\n                        <div style=\"display:flex;gap:10px;\">\n                            <button id=\"editGenderMale\" data-gender=\"male\" class=\"gender-select-btn\" style=\"flex:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all 0.2s ease;\">\n                                <span style=\"font-size:28px;color:rgba(255,255,255,0.3);transition:all 0.2s;\">\u2642<\/span>\n                                <span style=\"color:rgba(255,255,255,0.4);font-size:13px;font-weight:600;transition:all 0.2s;\">Male<\/span>\n                            <\/button>\n                            <button id=\"editGenderFemale\" data-gender=\"female\" class=\"gender-select-btn\" style=\"flex:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all 0.2s ease;\">\n                                <span style=\"font-size:28px;color:rgba(255,255,255,0.3);transition:all 0.2s;\">\u2640<\/span>\n                                <span style=\"color:rgba(255,255,255,0.4);font-size:13px;font-weight:600;transition:all 0.2s;\">Female<\/span>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Country Section -->\n                    <div class=\"profile-section\" style=\"margin-bottom:16px;\">\n                        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                            <div style=\"width:6px;height:6px;border-radius:50%;background:#3B82F6;\"><\/div>\n                            <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">Country<\/span>\n                        <\/div>\n                        <p style=\"font-size:12px;color:rgba(255,255,255,0.35);margin:0 0 10px 0;\">Your country will be shown on your public profile<\/p>\n                        <select\n                            id=\"editProfileCountry\"\n                            style=\"width:100%;padding:12px;border:1px solid rgba(255,255,255,0.08);border-radius:12px;font-family:inherit;font-size:14px;color:white;background:rgba(255,255,255,0.04);cursor:pointer;transition:border-color 0.2s;-webkit-appearance:none;appearance:none;background-image:url('data:image\/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Cpath fill=%22rgba(255,255,255,0.4)%22 d=%22M2 4l4 4 4-4%22\/%3E%3C\/svg%3E');background-repeat:no-repeat;background-position:right 12px center;\"\n                        >\n                            <option value=\"\" style=\"background:#1a1a2e;color:rgba(255,255,255,0.5);\">Select Country...<\/option>\n                            <option value=\"AF\">\ud83c\udde6\ud83c\uddeb Afghanistan<\/option>\n<option value=\"AL\">\ud83c\udde6\ud83c\uddf1 Albania<\/option>\n<option value=\"DZ\">\ud83c\udde9\ud83c\uddff Algeria<\/option>\n<option value=\"AD\">\ud83c\udde6\ud83c\udde9 Andorra<\/option>\n<option value=\"AO\">\ud83c\udde6\ud83c\uddf4 Angola<\/option>\n<option value=\"AG\">\ud83c\udde6\ud83c\uddec Antigua and Barbuda<\/option>\n<option value=\"AR\">\ud83c\udde6\ud83c\uddf7 Argentina<\/option>\n<option value=\"AM\">\ud83c\udde6\ud83c\uddf2 Armenia<\/option>\n<option value=\"AU\">\ud83c\udde6\ud83c\uddfa Australia<\/option>\n<option value=\"AT\">\ud83c\udde6\ud83c\uddf9 Austria<\/option>\n<option value=\"AZ\">\ud83c\udde6\ud83c\uddff Azerbaijan<\/option>\n<option value=\"BS\">\ud83c\udde7\ud83c\uddf8 Bahamas<\/option>\n<option value=\"BH\">\ud83c\udde7\ud83c\udded Bahrain<\/option>\n<option value=\"BD\">\ud83c\udde7\ud83c\udde9 Bangladesh<\/option>\n<option value=\"BB\">\ud83c\udde7\ud83c\udde7 Barbados<\/option>\n<option value=\"BY\">\ud83c\udde7\ud83c\uddfe Belarus<\/option>\n<option value=\"BE\">\ud83c\udde7\ud83c\uddea Belgium<\/option>\n<option value=\"BZ\">\ud83c\udde7\ud83c\uddff Belize<\/option>\n<option value=\"BJ\">\ud83c\udde7\ud83c\uddef Benin<\/option>\n<option value=\"BT\">\ud83c\udde7\ud83c\uddf9 Bhutan<\/option>\n<option value=\"BO\">\ud83c\udde7\ud83c\uddf4 Bolivia<\/option>\n<option value=\"BA\">\ud83c\udde7\ud83c\udde6 Bosnia and Herzegovina<\/option>\n<option value=\"BW\">\ud83c\udde7\ud83c\uddfc Botswana<\/option>\n<option value=\"BR\">\ud83c\udde7\ud83c\uddf7 Brazil<\/option>\n<option value=\"BN\">\ud83c\udde7\ud83c\uddf3 Brunei<\/option>\n<option value=\"BG\">\ud83c\udde7\ud83c\uddec Bulgaria<\/option>\n<option value=\"BF\">\ud83c\udde7\ud83c\uddeb Burkina Faso<\/option>\n<option value=\"BI\">\ud83c\udde7\ud83c\uddee Burundi<\/option>\n<option value=\"KH\">\ud83c\uddf0\ud83c\udded Cambodia<\/option>\n<option value=\"CM\">\ud83c\udde8\ud83c\uddf2 Cameroon<\/option>\n<option value=\"CA\">\ud83c\udde8\ud83c\udde6 Canada<\/option>\n<option value=\"CV\">\ud83c\udde8\ud83c\uddfb Cape Verde<\/option>\n<option value=\"CF\">\ud83c\udde8\ud83c\uddeb Central African Republic<\/option>\n<option value=\"TD\">\ud83c\uddf9\ud83c\udde9 Chad<\/option>\n<option value=\"CL\">\ud83c\udde8\ud83c\uddf1 Chile<\/option>\n<option value=\"CN\">\ud83c\udde8\ud83c\uddf3 China<\/option>\n<option value=\"CO\">\ud83c\udde8\ud83c\uddf4 Colombia<\/option>\n<option value=\"KM\">\ud83c\uddf0\ud83c\uddf2 Comoros<\/option>\n<option value=\"CG\">\ud83c\udde8\ud83c\uddec Congo<\/option>\n<option value=\"CD\">\ud83c\udde8\ud83c\udde9 Congo (DRC)<\/option>\n<option value=\"CR\">\ud83c\udde8\ud83c\uddf7 Costa Rica<\/option>\n<option value=\"HR\">\ud83c\udded\ud83c\uddf7 Croatia<\/option>\n<option value=\"CU\">\ud83c\udde8\ud83c\uddfa Cuba<\/option>\n<option value=\"CY\">\ud83c\udde8\ud83c\uddfe Cyprus<\/option>\n<option value=\"CZ\">\ud83c\udde8\ud83c\uddff Czech Republic<\/option>\n<option value=\"DK\">\ud83c\udde9\ud83c\uddf0 Denmark<\/option>\n<option value=\"DJ\">\ud83c\udde9\ud83c\uddef Djibouti<\/option>\n<option value=\"DM\">\ud83c\udde9\ud83c\uddf2 Dominica<\/option>\n<option value=\"DO\">\ud83c\udde9\ud83c\uddf4 Dominican Republic<\/option>\n<option value=\"EC\">\ud83c\uddea\ud83c\udde8 Ecuador<\/option>\n<option value=\"EG\">\ud83c\uddea\ud83c\uddec Egypt<\/option>\n<option value=\"SV\">\ud83c\uddf8\ud83c\uddfb El Salvador<\/option>\n<option value=\"GQ\">\ud83c\uddec\ud83c\uddf6 Equatorial Guinea<\/option>\n<option value=\"ER\">\ud83c\uddea\ud83c\uddf7 Eritrea<\/option>\n<option value=\"EE\">\ud83c\uddea\ud83c\uddea Estonia<\/option>\n<option value=\"ET\">\ud83c\uddea\ud83c\uddf9 Ethiopia<\/option>\n<option value=\"FJ\">\ud83c\uddeb\ud83c\uddef Fiji<\/option>\n<option value=\"FI\">\ud83c\uddeb\ud83c\uddee Finland<\/option>\n<option value=\"FR\">\ud83c\uddeb\ud83c\uddf7 France<\/option>\n<option value=\"GA\">\ud83c\uddec\ud83c\udde6 Gabon<\/option>\n<option value=\"GM\">\ud83c\uddec\ud83c\uddf2 Gambia<\/option>\n<option value=\"GE\">\ud83c\uddec\ud83c\uddea Georgia<\/option>\n<option value=\"DE\">\ud83c\udde9\ud83c\uddea Germany<\/option>\n<option value=\"GH\">\ud83c\uddec\ud83c\udded Ghana<\/option>\n<option value=\"GR\">\ud83c\uddec\ud83c\uddf7 Greece<\/option>\n<option value=\"GD\">\ud83c\uddec\ud83c\udde9 Grenada<\/option>\n<option value=\"GT\">\ud83c\uddec\ud83c\uddf9 Guatemala<\/option>\n<option value=\"GN\">\ud83c\uddec\ud83c\uddf3 Guinea<\/option>\n<option value=\"GW\">\ud83c\uddec\ud83c\uddfc Guinea-Bissau<\/option>\n<option value=\"GY\">\ud83c\uddec\ud83c\uddfe Guyana<\/option>\n<option value=\"HT\">\ud83c\udded\ud83c\uddf9 Haiti<\/option>\n<option value=\"HN\">\ud83c\udded\ud83c\uddf3 Honduras<\/option>\n<option value=\"HU\">\ud83c\udded\ud83c\uddfa Hungary<\/option>\n<option value=\"IS\">\ud83c\uddee\ud83c\uddf8 Iceland<\/option>\n<option value=\"IN\">\ud83c\uddee\ud83c\uddf3 India<\/option>\n<option value=\"ID\">\ud83c\uddee\ud83c\udde9 Indonesia<\/option>\n<option value=\"IR\">\ud83c\uddee\ud83c\uddf7 Iran<\/option>\n<option value=\"IQ\">\ud83c\uddee\ud83c\uddf6 Iraq<\/option>\n<option value=\"IE\">\ud83c\uddee\ud83c\uddea Ireland<\/option>\n<option value=\"IL\">\ud83c\uddee\ud83c\uddf1 Israel<\/option>\n<option value=\"IT\">\ud83c\uddee\ud83c\uddf9 Italy<\/option>\n<option value=\"CI\">\ud83c\udde8\ud83c\uddee Ivory Coast<\/option>\n<option value=\"JM\">\ud83c\uddef\ud83c\uddf2 Jamaica<\/option>\n<option value=\"JP\">\ud83c\uddef\ud83c\uddf5 Japan<\/option>\n<option value=\"JO\">\ud83c\uddef\ud83c\uddf4 Jordan<\/option>\n<option value=\"KZ\">\ud83c\uddf0\ud83c\uddff Kazakhstan<\/option>\n<option value=\"KE\">\ud83c\uddf0\ud83c\uddea Kenya<\/option>\n<option value=\"KI\">\ud83c\uddf0\ud83c\uddee Kiribati<\/option>\n<option value=\"KW\">\ud83c\uddf0\ud83c\uddfc Kuwait<\/option>\n<option value=\"KG\">\ud83c\uddf0\ud83c\uddec Kyrgyzstan<\/option>\n<option value=\"LA\">\ud83c\uddf1\ud83c\udde6 Laos<\/option>\n<option value=\"LV\">\ud83c\uddf1\ud83c\uddfb Latvia<\/option>\n<option value=\"LB\">\ud83c\uddf1\ud83c\udde7 Lebanon<\/option>\n<option value=\"LS\">\ud83c\uddf1\ud83c\uddf8 Lesotho<\/option>\n<option value=\"LR\">\ud83c\uddf1\ud83c\uddf7 Liberia<\/option>\n<option value=\"LY\">\ud83c\uddf1\ud83c\uddfe Libya<\/option>\n<option value=\"LI\">\ud83c\uddf1\ud83c\uddee Liechtenstein<\/option>\n<option value=\"LT\">\ud83c\uddf1\ud83c\uddf9 Lithuania<\/option>\n<option value=\"LU\">\ud83c\uddf1\ud83c\uddfa Luxembourg<\/option>\n<option value=\"MK\">\ud83c\uddf2\ud83c\uddf0 Macedonia<\/option>\n<option value=\"MG\">\ud83c\uddf2\ud83c\uddec Madagascar<\/option>\n<option value=\"MW\">\ud83c\uddf2\ud83c\uddfc Malawi<\/option>\n<option value=\"MY\">\ud83c\uddf2\ud83c\uddfe Malaysia<\/option>\n<option value=\"MV\">\ud83c\uddf2\ud83c\uddfb Maldives<\/option>\n<option value=\"ML\">\ud83c\uddf2\ud83c\uddf1 Mali<\/option>\n<option value=\"MT\">\ud83c\uddf2\ud83c\uddf9 Malta<\/option>\n<option value=\"MH\">\ud83c\uddf2\ud83c\udded Marshall Islands<\/option>\n<option value=\"MR\">\ud83c\uddf2\ud83c\uddf7 Mauritania<\/option>\n<option value=\"MU\">\ud83c\uddf2\ud83c\uddfa Mauritius<\/option>\n<option value=\"MX\">\ud83c\uddf2\ud83c\uddfd Mexico<\/option>\n<option value=\"FM\">\ud83c\uddeb\ud83c\uddf2 Micronesia<\/option>\n<option value=\"MD\">\ud83c\uddf2\ud83c\udde9 Moldova<\/option>\n<option value=\"MC\">\ud83c\uddf2\ud83c\udde8 Monaco<\/option>\n<option value=\"MN\">\ud83c\uddf2\ud83c\uddf3 Mongolia<\/option>\n<option value=\"ME\">\ud83c\uddf2\ud83c\uddea Montenegro<\/option>\n<option value=\"MA\">\ud83c\uddf2\ud83c\udde6 Morocco<\/option>\n<option value=\"MZ\">\ud83c\uddf2\ud83c\uddff Mozambique<\/option>\n<option value=\"MM\">\ud83c\uddf2\ud83c\uddf2 Myanmar<\/option>\n<option value=\"NA\">\ud83c\uddf3\ud83c\udde6 Namibia<\/option>\n<option value=\"NR\">\ud83c\uddf3\ud83c\uddf7 Nauru<\/option>\n<option value=\"NP\">\ud83c\uddf3\ud83c\uddf5 Nepal<\/option>\n<option value=\"NL\">\ud83c\uddf3\ud83c\uddf1 Netherlands<\/option>\n<option value=\"NZ\">\ud83c\uddf3\ud83c\uddff New Zealand<\/option>\n<option value=\"NI\">\ud83c\uddf3\ud83c\uddee Nicaragua<\/option>\n<option value=\"NE\">\ud83c\uddf3\ud83c\uddea Niger<\/option>\n<option value=\"NG\">\ud83c\uddf3\ud83c\uddec Nigeria<\/option>\n<option value=\"KP\">\ud83c\uddf0\ud83c\uddf5 North Korea<\/option>\n<option value=\"NO\">\ud83c\uddf3\ud83c\uddf4 Norway<\/option>\n<option value=\"OM\">\ud83c\uddf4\ud83c\uddf2 Oman<\/option>\n<option value=\"PK\">\ud83c\uddf5\ud83c\uddf0 Pakistan<\/option>\n<option value=\"PW\">\ud83c\uddf5\ud83c\uddfc Palau<\/option>\n<option value=\"PS\">\ud83c\uddf5\ud83c\uddf8 Palestine<\/option>\n<option value=\"PA\">\ud83c\uddf5\ud83c\udde6 Panama<\/option>\n<option value=\"PG\">\ud83c\uddf5\ud83c\uddec Papua New Guinea<\/option>\n<option value=\"PY\">\ud83c\uddf5\ud83c\uddfe Paraguay<\/option>\n<option value=\"PE\">\ud83c\uddf5\ud83c\uddea Peru<\/option>\n<option value=\"PH\">\ud83c\uddf5\ud83c\udded Philippines<\/option>\n<option value=\"PL\">\ud83c\uddf5\ud83c\uddf1 Poland<\/option>\n<option value=\"PT\">\ud83c\uddf5\ud83c\uddf9 Portugal<\/option>\n<option value=\"QA\">\ud83c\uddf6\ud83c\udde6 Qatar<\/option>\n<option value=\"RO\">\ud83c\uddf7\ud83c\uddf4 Romania<\/option>\n<option value=\"RU\">\ud83c\uddf7\ud83c\uddfa Russia<\/option>\n<option value=\"RW\">\ud83c\uddf7\ud83c\uddfc Rwanda<\/option>\n<option value=\"KN\">\ud83c\uddf0\ud83c\uddf3 Saint Kitts and Nevis<\/option>\n<option value=\"LC\">\ud83c\uddf1\ud83c\udde8 Saint Lucia<\/option>\n<option value=\"VC\">\ud83c\uddfb\ud83c\udde8 Saint Vincent<\/option>\n<option value=\"WS\">\ud83c\uddfc\ud83c\uddf8 Samoa<\/option>\n<option value=\"SM\">\ud83c\uddf8\ud83c\uddf2 San Marino<\/option>\n<option value=\"ST\">\ud83c\uddf8\ud83c\uddf9 Sao Tome and Principe<\/option>\n<option value=\"SA\">\ud83c\uddf8\ud83c\udde6 Saudi Arabia<\/option>\n<option value=\"SN\">\ud83c\uddf8\ud83c\uddf3 Senegal<\/option>\n<option value=\"RS\">\ud83c\uddf7\ud83c\uddf8 Serbia<\/option>\n<option value=\"SC\">\ud83c\uddf8\ud83c\udde8 Seychelles<\/option>\n<option value=\"SL\">\ud83c\uddf8\ud83c\uddf1 Sierra Leone<\/option>\n<option value=\"SG\">\ud83c\uddf8\ud83c\uddec Singapore<\/option>\n<option value=\"SK\">\ud83c\uddf8\ud83c\uddf0 Slovakia<\/option>\n<option value=\"SI\">\ud83c\uddf8\ud83c\uddee Slovenia<\/option>\n<option value=\"SB\">\ud83c\uddf8\ud83c\udde7 Solomon Islands<\/option>\n<option value=\"SO\">\ud83c\uddf8\ud83c\uddf4 Somalia<\/option>\n<option value=\"ZA\">\ud83c\uddff\ud83c\udde6 South Africa<\/option>\n<option value=\"KR\">\ud83c\uddf0\ud83c\uddf7 South Korea<\/option>\n<option value=\"SS\">\ud83c\uddf8\ud83c\uddf8 South Sudan<\/option>\n<option value=\"ES\">\ud83c\uddea\ud83c\uddf8 Spain<\/option>\n<option value=\"LK\">\ud83c\uddf1\ud83c\uddf0 Sri Lanka<\/option>\n<option value=\"SD\">\ud83c\uddf8\ud83c\udde9 Sudan<\/option>\n<option value=\"SR\">\ud83c\uddf8\ud83c\uddf7 Suriname<\/option>\n<option value=\"SZ\">\ud83c\uddf8\ud83c\uddff Swaziland<\/option>\n<option value=\"SE\">\ud83c\uddf8\ud83c\uddea Sweden<\/option>\n<option value=\"CH\">\ud83c\udde8\ud83c\udded Switzerland<\/option>\n<option value=\"SY\">\ud83c\uddf8\ud83c\uddfe Syria<\/option>\n<option value=\"TW\">\ud83c\uddf9\ud83c\uddfc Taiwan<\/option>\n<option value=\"TJ\">\ud83c\uddf9\ud83c\uddef Tajikistan<\/option>\n<option value=\"TZ\">\ud83c\uddf9\ud83c\uddff Tanzania<\/option>\n<option value=\"TH\">\ud83c\uddf9\ud83c\udded Thailand<\/option>\n<option value=\"TL\">\ud83c\uddf9\ud83c\uddf1 Timor-Leste<\/option>\n<option value=\"TG\">\ud83c\uddf9\ud83c\uddec Togo<\/option>\n<option value=\"TO\">\ud83c\uddf9\ud83c\uddf4 Tonga<\/option>\n<option value=\"TT\">\ud83c\uddf9\ud83c\uddf9 Trinidad and Tobago<\/option>\n<option value=\"TN\">\ud83c\uddf9\ud83c\uddf3 Tunisia<\/option>\n<option value=\"TR\">\ud83c\uddf9\ud83c\uddf7 Turkey<\/option>\n<option value=\"TM\">\ud83c\uddf9\ud83c\uddf2 Turkmenistan<\/option>\n<option value=\"TV\">\ud83c\uddf9\ud83c\uddfb Tuvalu<\/option>\n<option value=\"UG\">\ud83c\uddfa\ud83c\uddec Uganda<\/option>\n<option value=\"UA\">\ud83c\uddfa\ud83c\udde6 Ukraine<\/option>\n<option value=\"AE\">\ud83c\udde6\ud83c\uddea United Arab Emirates<\/option>\n<option value=\"GB\">\ud83c\uddec\ud83c\udde7 United Kingdom<\/option>\n<option value=\"US\">\ud83c\uddfa\ud83c\uddf8 United States<\/option>\n<option value=\"UY\">\ud83c\uddfa\ud83c\uddfe Uruguay<\/option>\n<option value=\"UZ\">\ud83c\uddfa\ud83c\uddff Uzbekistan<\/option>\n<option value=\"VU\">\ud83c\uddfb\ud83c\uddfa Vanuatu<\/option>\n<option value=\"VA\">\ud83c\uddfb\ud83c\udde6 Vatican City<\/option>\n<option value=\"VE\">\ud83c\uddfb\ud83c\uddea Venezuela<\/option>\n<option value=\"VN\">\ud83c\uddfb\ud83c\uddf3 Vietnam<\/option>\n<option value=\"YE\">\ud83c\uddfe\ud83c\uddea Yemen<\/option>\n<option value=\"ZM\">\ud83c\uddff\ud83c\uddf2 Zambia<\/option>\n<option value=\"ZW\">\ud83c\uddff\ud83c\uddfc Zimbabwe<\/option>\n                        <\/select>\n                    <\/div>\n\n                    <!-- Age Section -->\n                    <div class=\"profile-section\" style=\"margin-bottom:16px;\">\n                        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                            <div style=\"width:6px;height:6px;border-radius:50%;background:#F59E0B;\"><\/div>\n                            <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">Age<\/span>\n                        <\/div>\n                        <p style=\"font-size:12px;color:rgba(255,255,255,0.35);margin:0 0 10px 0;\">Enter your birth date (must be 18+)<\/p>\n                        <input\n                            type=\"date\"\n                            id=\"editProfileBirthdate\"\n                            max=\"2008-04-04\"\n                            style=\"width:100%;padding:12px;border:1px solid rgba(255,255,255,0.08);border-radius:12px;font-family:inherit;font-size:14px;color:white;background:rgba(255,255,255,0.04);cursor:pointer;transition:border-color 0.2s;color-scheme:dark;\"\n                        >\n                    <\/div>\n\n                    <!-- Looking For Section -->\n                    <div class=\"profile-section\" style=\"margin-bottom:16px;\">\n                        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                            <div style=\"width:6px;height:6px;border-radius:50%;background:#10B981;\"><\/div>\n                            <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">Looking For<\/span>\n                        <\/div>\n                        <input\n                            type=\"text\"\n                            id=\"editProfileLookingFor\"\n                            placeholder=\"e.g., Friends, Chat, Dating...\"\n                            maxlength=\"50\"\n                            style=\"width:100%;padding:12px;border:1px solid rgba(255,255,255,0.08);border-radius:12px;font-family:inherit;font-size:14px;color:white;background:rgba(255,255,255,0.04);transition:border-color 0.2s;\"\n                        >\n                    <\/div>\n\n                    <!-- Bio Section -->\n                    <div class=\"profile-section\" style=\"margin-bottom:16px;\">\n                        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                            <div style=\"width:6px;height:6px;border-radius:50%;background:#3B82F6;\"><\/div>\n                            <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">About<\/span>\n                        <\/div>\n                        <textarea\n                            id=\"editProfileBio\"\n                            placeholder=\"Tell others about yourself... (max 200 characters)\"\n                            maxlength=\"200\"\n                            style=\"width:100%;min-height:90px;padding:12px;border:1px solid rgba(255,255,255,0.08);border-radius:12px;font-family:inherit;font-size:14px;color:white;background:rgba(255,255,255,0.04);resize:vertical;transition:border-color 0.2s;\"\n                        ><\/textarea>\n                        <div style=\"text-align:right;margin-top:4px;\">\n                            <span id=\"bioCharCount\" style=\"font-size:11px;color:rgba(255,255,255,0.35);\">0\/200<\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Interests Section -->\n                    <div class=\"profile-section\" style=\"margin-bottom:16px;\">\n                        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                            <div style=\"width:6px;height:6px;border-radius:50%;background:#10B981;\"><\/div>\n                            <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">Interests<\/span>\n                        <\/div>\n                        <input\n                            type=\"text\"\n                            id=\"editProfileInterestsInput\"\n                            placeholder=\"Type an interest and press Enter (max 10)\"\n                            style=\"width:100%;padding:12px;border:1px solid rgba(255,255,255,0.08);border-radius:12px;font-family:inherit;font-size:14px;color:white;background:rgba(255,255,255,0.04);transition:border-color 0.2s;\"\n                        >\n                        <div id=\"editProfileInterestsList\" style=\"display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;\"><\/div>\n                        <p style=\"font-size:11px;color:rgba(255,255,255,0.3);margin:6px 0 0 0;\">Press Enter to add interests. Click tags to remove them.<\/p>\n                    <\/div>\n\n                    <!-- Photos Section (premium only, hidden by default) -->\n                    <div id=\"editProfilePhotosSection\" class=\"profile-section\" style=\"margin-bottom:16px;display:none;\">\n                        <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                            <div style=\"width:6px;height:6px;border-radius:50%;background:#EC4899;\"><\/div>\n                            <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">Photos<\/span>\n                        <\/div>\n                        <div onclick=\"if(typeof openPremiumPhotosModal==='function'){closeEditProfileModal();openPremiumPhotosModal();}\" style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.08)';this.style.borderColor='rgba(255,255,255,0.15)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.04)';this.style.borderColor='rgba(255,255,255,0.08)'\">\n                            <div style=\"width:44px;height:44px;border-radius:12px;background:rgba(236,72,153,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;\">\n                                <span style=\"font-size:22px;\">\ud83d\udcf8<\/span>\n                            <\/div>\n                            <div style=\"flex:1;min-width:0;\">\n                                <div style=\"color:white;font-size:14px;font-weight:600;margin-bottom:2px;\">Manage Photos<\/div>\n                                <div style=\"color:rgba(255,255,255,0.4);font-size:12px;\">Upload and manage your premium photos<\/div>\n                            <\/div>\n                            <div style=\"color:rgba(255,255,255,0.25);font-size:18px;flex-shrink:0;\">\u203a<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Save Button -->\n                    <button\n                        id=\"saveProfileBtn\"\n                        onclick=\"saveProfileChanges()\"\n                        style=\"width:100%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);color:white;border-radius:14px;padding:14px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;margin-top:4px;\"\n                        onmouseover=\"this.style.background='rgba(255,255,255,0.15)'\"\n                        onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\"\n                    >\n                        Save Changes                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Send Sparks Modal -->\n<div id=\"sendSparksModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-backdrop\"><\/div>\n    <div class=\"meetgle-modal-content send-sparks-modal-content\" style=\"max-width:450px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 20px 0 20px;\">\n            <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;\">\n                <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Send Sparks<\/h2>\n                <button onclick=\"closeSendSparksModal()\" style=\"background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);width:32px;height:32px;border-radius:50%;font-size:18px;line-height:0;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.15)';this.style.color='white'\" onmouseout=\"this.style.background='rgba(255,255,255,0.08)';this.style.color='rgba(255,255,255,0.5)'\">&times;<\/button>\n            <\/div>\n            <p style=\"color:rgba(255,255,255,0.4);font-size:14px;margin:0 0 16px 0;\">Send sparks to <span id=\"sendSparksRecipient\" style=\"font-weight:700;color:white;\"><\/span><\/p>\n\n            <!-- Balance Pill -->\n            <div style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;\">\n                <span style=\"color:rgba(255,255,255,0.45);font-size:13px;font-weight:500;\">Your balance<\/span>\n                <div style=\"display:flex;align-items:center;gap:6px;\">\n                    <span style=\"font-size:16px;\">\u26a1<\/span>\n                    <span id=\"sendSparksYourBalance\" style=\"color:#F59E0B;font-weight:700;font-size:18px;\">0<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Content -->\n        <div style=\"padding:20px;\">\n\n            <!-- Quick Amount Section -->\n            <div style=\"margin-bottom:20px;\">\n                <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:12px;\">\n                    <div style=\"width:6px;height:6px;border-radius:50%;background:#F59E0B;flex-shrink:0;\"><\/div>\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">Quick Select<\/span>\n                <\/div>\n                <div style=\"display:grid;grid-template-columns:repeat(4, 1fr);gap:8px;margin-bottom:8px;\">\n                    <button class=\"spark-amount-btn\" data-amount=\"1\" onclick=\"selectSparkAmount(1)\">1<\/button>\n                    <button class=\"spark-amount-btn\" data-amount=\"5\" onclick=\"selectSparkAmount(5)\">5<\/button>\n                    <button class=\"spark-amount-btn\" data-amount=\"10\" onclick=\"selectSparkAmount(10)\">10<\/button>\n                    <button class=\"spark-amount-btn\" data-amount=\"50\" onclick=\"selectSparkAmount(50)\">50<\/button>\n                <\/div>\n                <div style=\"display:grid;grid-template-columns:repeat(4, 1fr);gap:8px;\">\n                    <button class=\"spark-amount-btn\" data-amount=\"100\" onclick=\"selectSparkAmount(100)\">100<\/button>\n                    <button class=\"spark-amount-btn\" data-amount=\"250\" onclick=\"selectSparkAmount(250)\">250<\/button>\n                    <button class=\"spark-amount-btn\" data-amount=\"500\" onclick=\"selectSparkAmount(500)\">500<\/button>\n                    <button class=\"spark-amount-btn\" data-amount=\"1000\" onclick=\"selectSparkAmount(1000)\">1000<\/button>\n                <\/div>\n            <\/div>\n\n            <!-- Custom Amount Section -->\n            <div style=\"margin-bottom:20px;\">\n                <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n                    <div style=\"width:6px;height:6px;border-radius:50%;background:#F59E0B;flex-shrink:0;\"><\/div>\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">Custom Amount<\/span>\n                <\/div>\n                <input\n                    type=\"number\"\n                    id=\"customSparkAmount\"\n                    placeholder=\"Enter amount...\"\n                    min=\"1\"\n                    style=\"width:100%;padding:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;font-size:16px;font-weight:600;color:white;text-align:center;outline:none;box-sizing:border-box;\"\n                    oninput=\"handleCustomAmountInput(this.value)\"\n                >\n            <\/div>\n\n            <!-- Error Message -->\n            <div id=\"sendSparksError\" style=\"display:none;background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);border-radius:12px;padding:12px;margin-bottom:16px;text-align:center;color:#EF4444;font-size:14px;font-weight:600;\"><\/div>\n\n            <!-- Success Message -->\n            <div id=\"sendSparksSuccess\" style=\"display:none;background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);border-radius:12px;padding:16px;margin-bottom:16px;text-align:center;\">\n                <div style=\"font-size:48px;margin-bottom:8px;\">\u2705<\/div>\n                <div style=\"color:#10B981;font-size:16px;font-weight:700;margin-bottom:4px;\">Sparks Sent Successfully!<\/div>\n                <div id=\"sendSparksSuccessMessage\" style=\"color:rgba(16,185,129,0.8);font-size:14px;\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Footer Buttons -->\n        <div style=\"padding:16px 20px 20px;display:flex;gap:12px;\">\n            <button onclick=\"closeSendSparksModal()\" style=\"flex:1;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.1)';this.style.color='white'\" onmouseout=\"this.style.background='rgba(255,255,255,0.06)';this.style.color='rgba(255,255,255,0.6)'\">Cancel<\/button>\n            <button id=\"confirmSendSparksBtn\" onclick=\"confirmSendSparks()\" style=\"flex:1;background:#F59E0B;color:#000;border:none;border-radius:12px;padding:12px 24px;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.2s;\" onmouseover=\"this.style.background='#FBBF24';this.style.transform='scale(1.02)'\" onmouseout=\"this.style.background='#F59E0B';this.style.transform='scale(1)'\">Send \u26a1<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Send Stickers Modal -->\n<div id=\"sendStickersModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-backdrop\"><\/div>\n    <div class=\"meetgle-modal-content send-stickers-modal-content\" style=\"max-width:480px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 20px 0 20px;\">\n            <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;\">\n                <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Send Sticker<\/h2>\n                <button onclick=\"closeSendStickersModal()\" style=\"background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);width:32px;height:32px;border-radius:50%;font-size:18px;line-height:0;font-weight:300;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.15)';this.style.color='white'\" onmouseout=\"this.style.background='rgba(255,255,255,0.08)';this.style.color='rgba(255,255,255,0.5)'\">&times;<\/button>\n            <\/div>\n            <p style=\"color:rgba(255,255,255,0.4);font-size:14px;margin:0 0 16px 0;\">Send a sticker to <span id=\"sendStickersRecipient\" style=\"font-weight:700;color:white;\"><\/span><\/p>\n\n            <!-- Balance + Cost Row -->\n            <div style=\"display:flex;gap:10px;\">\n                <div style=\"flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;\">\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:12px;font-weight:500;\">Balance<\/span>\n                    <div style=\"display:flex;align-items:center;gap:5px;\">\n                        <span style=\"font-size:14px;\">\u26a1<\/span>\n                        <span id=\"sendStickersYourBalance\" style=\"color:#F59E0B;font-weight:700;font-size:16px;\">0<\/span>\n                    <\/div>\n                <\/div>\n                <div style=\"background:rgba(236,72,153,0.12);border:1px solid rgba(236,72,153,0.2);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:6px;\">\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:12px;font-weight:500;\">Cost<\/span>\n                    <span style=\"color:#EC4899;font-weight:700;font-size:14px;\">50 \u26a1<\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Content -->\n        <div style=\"padding:20px;\">\n\n            <!-- Sticker Grid Section -->\n            <div style=\"margin-bottom:20px;\">\n                <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:12px;\">\n                    <div style=\"width:6px;height:6px;border-radius:50%;background:#EC4899;flex-shrink:0;\"><\/div>\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;\">Select a Sticker<\/span>\n                <\/div>\n                <div class=\"sticker-grid\" id=\"stickerGrid\">\n                    <!-- Stickers will be loaded dynamically -->\n                <\/div>\n            <\/div>\n\n            <!-- Selected Sticker Preview -->\n            <div id=\"selectedStickerPreview\" style=\"display:none;background:rgba(255,255,255,0.04);border:1px solid rgba(236,72,153,0.3);border-radius:14px;padding:16px;margin-bottom:16px;text-align:center;\">\n                <div style=\"color:rgba(255,255,255,0.4);font-size:12px;margin-bottom:8px;\">Selected Sticker<\/div>\n                <img decoding=\"async\" id=\"selectedStickerImage\" src=\"\" alt=\"Selected Sticker\" style=\"width:80px;height:80px;object-fit:contain;\">\n                <div id=\"selectedStickerName\" style=\"color:#EC4899;font-size:14px;font-weight:600;margin-top:8px;\"><\/div>\n            <\/div>\n\n            <!-- Error Message -->\n            <div id=\"sendStickersError\" style=\"display:none;background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);border-radius:12px;padding:12px;margin-bottom:16px;text-align:center;color:#EF4444;font-size:14px;font-weight:600;\"><\/div>\n\n            <!-- Success Message -->\n            <div id=\"sendStickersSuccess\" style=\"display:none;background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);border-radius:12px;padding:16px;margin-bottom:16px;text-align:center;\">\n                <div style=\"font-size:48px;margin-bottom:8px;\">\ud83c\udf89<\/div>\n                <div style=\"color:#10B981;font-size:16px;font-weight:700;margin-bottom:4px;\">Sticker Sent Successfully!<\/div>\n                <div id=\"sendStickersSuccessMessage\" style=\"color:rgba(16,185,129,0.8);font-size:14px;\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Footer Buttons -->\n        <div style=\"padding:16px 20px 20px;display:flex;gap:12px;\">\n            <button onclick=\"closeSendStickersModal()\" style=\"flex:1;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.6);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 24px;font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.1)';this.style.color='white'\" onmouseout=\"this.style.background='rgba(255,255,255,0.06)';this.style.color='rgba(255,255,255,0.6)'\">Cancel<\/button>\n            <button id=\"confirmSendStickerBtn\" onclick=\"confirmSendSticker()\" style=\"flex:1;background:#EC4899;color:#fff;border:none;border-radius:12px;padding:12px 24px;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.2s;\" onmouseover=\"this.style.background='#F472B6';this.style.transform='scale(1.02)'\" onmouseout=\"this.style.background='#EC4899';this.style.transform='scale(1)'\">Send \ud83c\udf81<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n        \n        <!-- Chat History Modal -->\n        \n<!-- Chat History Modal -->\n<div id=\"meetgleChatHistoryModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content chat-history-modal-content\" style=\"max-width:700px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 24px 0 24px;display:flex;align-items:center;justify-content:space-between;\">\n            <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Chat History<\/h2>\n            <button onclick=\"closeChatHistoryModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n        <\/div>\n\n        <!-- Content -->\n        <div id=\"chatHistoryContent\" style=\"padding:16px 24px 24px 24px;overflow-y:auto;max-height:calc(80vh - 80px);\">\n\n                        <!-- LOGGED OUT: Demo History + CTA -->\n            <div id=\"chatHistoryDemoView\">\n                <!-- Demo matches preview -->\n                <div style=\"margin-bottom:16px;\">\n                    <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                        <div style=\"width:6px;height:6px;border-radius:50%;background:#10B981;\"><\/div>\n                        <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;\">Recent Matches<\/span>\n                    <\/div>\n\n                    <!-- Blurred demo items - these look real but are blurred to tease -->\n                    <div style=\"position:relative;\">\n                        <div class=\"ch-demo-list\" style=\"display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden;filter:blur(3px);-webkit-filter:blur(3px);pointer-events:none;user-select:none;\">\n                            <!-- Demo items populated by JS -->\n                        <\/div>\n\n                        <!-- CTA overlay -->\n                        <div style=\"position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(20,20,30,0.5);border-radius:14px;\">\n                            <div style=\"font-size:32px;margin-bottom:10px;\">\ud83d\udd12<\/div>\n                            <div style=\"color:white;font-weight:700;font-size:16px;margin-bottom:4px;\">See who you&#039;ve chatted with<\/div>\n                            <div style=\"color:rgba(255,255,255,0.4);font-size:12px;margin-bottom:16px;text-align:center;padding:0 20px;\">Create a free account to save your chat history and reconnect with people<\/div>\n                            <a href=\"\/register\" style=\"background:#F59E0B;color:#000;padding:10px 24px;border-radius:16px;text-decoration:none;font-weight:700;font-size:14px;transition:all 0.2s;\" onmouseover=\"this.style.background='#D97706'\" onmouseout=\"this.style.background='#F59E0B'\">Create Free Account<\/a>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Benefits section -->\n                <div style=\"margin-bottom:16px;\">\n                    <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                        <div style=\"width:6px;height:6px;border-radius:50%;background:#F59E0B;\"><\/div>\n                        <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;\">Why Create an Account?<\/span>\n                    <\/div>\n                    <div style=\"display:flex;flex-direction:column;gap:6px;\">\n                        <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;\">\n                            <span style=\"font-size:18px;\">\ud83d\udcac<\/span>\n                            <div>\n                                <div style=\"color:white;font-weight:600;font-size:13px;\">Save your chat history<\/div>\n                                <div style=\"color:rgba(255,255,255,0.35);font-size:11px;\">See your last 50 matches anytime<\/div>\n                            <\/div>\n                        <\/div>\n                        <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;\">\n                            <span style=\"font-size:18px;\">\ud83d\udc64<\/span>\n                            <div>\n                                <div style=\"color:white;font-weight:600;font-size:13px;\">View profiles anytime<\/div>\n                                <div style=\"color:rgba(255,255,255,0.35);font-size:11px;\">Click any match to see their full profile<\/div>\n                            <\/div>\n                        <\/div>\n                        <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;\">\n                            <span style=\"font-size:18px;\">\u26a1<\/span>\n                            <div>\n                                <div style=\"color:white;font-weight:600;font-size:13px;\">Earn 20 free Sparks<\/div>\n                                <div style=\"color:rgba(255,255,255,0.35);font-size:11px;\">Instant bonus just for signing up<\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n                    <\/div>\n    <\/div>\n<\/div>\n\n<style>\n@keyframes chSpin {\n    to { transform: rotate(360deg); }\n}\n\n.chat-history-modal-content {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.chat-history-modal-content::-webkit-scrollbar {\n    display: none;\n}\n#chatHistoryContent {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n#chatHistoryContent::-webkit-scrollbar {\n    display: none;\n}\n\n\/* History items *\/\n.ch-history-item {\n    padding: 10px 14px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    cursor: pointer;\n    transition: background 0.15s;\n    border-bottom: 1px solid rgba(255,255,255,0.04);\n}\n.ch-history-item:hover {\n    background: rgba(255,255,255,0.06);\n}\n.ch-history-item:last-child {\n    border-bottom: none;\n}\n\n.ch-avatar {\n    width: 40px;\n    height: 40px;\n    border-radius: 50% !important;\n    object-fit: cover;\n    flex-shrink: 0;\n    border: 1px solid rgba(255,255,255,0.1);\n}\n\n.ch-username {\n    color: white;\n    font-weight: 600;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n}\n\n.ch-meta {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 2px;\n}\n\n.ch-gender-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n}\n\n.ch-time {\n    color: rgba(255,255,255,0.3);\n    font-size: 11px;\n}\n\n.ch-flag {\n    font-size: 14px;\n    line-height: 1;\n}\n\n\/* Mobile fullscreen *\/\n@media (max-width: 900px) {\n    #meetgleChatHistoryModal { padding: 0 !important; }\n    #meetgleChatHistoryModal > .chat-history-modal-content {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        height: 100vh !important;\n        height: 100svh !important;\n        max-height: 100vh !important;\n        max-height: 100svh !important;\n        border-radius: 0 !important;\n    }\n    #chatHistoryContent {\n        max-height: calc(100svh - 80px) !important;\n    }\n}\n<\/style>\n\n<script>\n\/\/ Chat history state\nlet chatHistoryOffset = 0;\nlet chatHistoryLimit = 20;\nlet chatHistoryHasMore = true;\nlet chatHistoryLoading = false;\n\n\/\/ --- LOGGED OUT: Populate demo history ---\n(function() {\n    const demoNames = ['SophiaM', 'Lucas_K', 'Amira22', 'JakeW', 'NinaRose', 'Marco_V', 'ChloeB', 'EthanJ'];\n    const demoGenders = ['female', 'male', 'female', 'male', 'female', 'male', 'female', 'male'];\n    const demoCountries = ['US', 'DE', 'FR', 'GB', 'BR', 'IT', 'CA', 'ES'];\n    const demoTimes = ['2 min ago', '15 min ago', '1 hour ago', '3 hours ago', 'Yesterday', 'Yesterday', '2 days ago', '3 days ago'];\n    const demoProfiles = [3, 7, 12, 1, 19, 5, 22, 9];\n\n    function flagEmoji(cc) {\n        return String.fromCodePoint(...cc.toUpperCase().split('').map(c => 127397 + c.charCodeAt()));\n    }\n\n    document.addEventListener('DOMContentLoaded', function() {\n        const list = document.querySelector('.ch-demo-list');\n        if (!list) return;\n        const base = (typeof ANONCAM_DATA !== 'undefined' && ANONCAM_DATA.pluginUrl) ? ANONCAM_DATA.pluginUrl : '';\n\n        demoNames.forEach(function(name, i) {\n            const genderColor = demoGenders[i] === 'male' ? '#3B82F6' : '#EC4899';\n            const genderLabel = demoGenders[i].charAt(0).toUpperCase() + demoGenders[i].slice(1);\n            const flag = flagEmoji(demoCountries[i]);\n            const avatarUrl = base + 'public\/img\/profiles\/profile' + demoProfiles[i] + '.webp';\n\n            const item = document.createElement('div');\n            item.style.cssText = 'padding:10px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,0.04);';\n            item.innerHTML = '<img decoding=\"async\" src=\"' + avatarUrl + '\" style=\"width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,0.1);\">'\n                + '<div style=\"flex:1;min-width:0;\">'\n                + '<div style=\"color:white;font-weight:600;font-size:14px;\">' + name + '<\/div>'\n                + '<div style=\"display:flex;align-items:center;gap:6px;margin-top:2px;\">'\n                + '<span style=\"display:inline-flex;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;color:white;background:' + genderColor + ';\">' + genderLabel + '<\/span>'\n                + '<span style=\"font-size:14px;\">' + flag + '<\/span>'\n                + '<span style=\"color:rgba(255,255,255,0.3);font-size:11px;\">' + demoTimes[i] + '<\/span>'\n                + '<\/div><\/div>';\n            list.appendChild(item);\n        });\n    });\n})();\n\n\/\/ Global functions for chat history modal\nwindow.openChatHistoryModal = function() {\n    const modal = document.getElementById('meetgleChatHistoryModal');\n    if (!modal) return;\n\n    \/\/ Reset state\n    chatHistoryOffset = 0;\n    chatHistoryHasMore = true;\n    chatHistoryLoading = false;\n\n    modal.style.display = 'flex';\n\n    };\n\nwindow.closeChatHistoryModal = function() {\n    const modal = document.getElementById('meetgleChatHistoryModal');\n    if (modal) modal.style.display = 'none';\n};\n\n\n\/\/ Setup infinite scroll\ndocument.addEventListener('DOMContentLoaded', function() {\n    const content = document.getElementById('chatHistoryContent');\n    if (content) {\n        content.addEventListener('scroll', function() {\n            if (content.scrollHeight - content.scrollTop - content.clientHeight < 100) {\n                            }\n        });\n    }\n});\n\n\/\/ Delete history functions\nwindow.showDeleteConfirmation = function() {\n    var btn = document.getElementById('deleteHistoryBtn');\n    var ui = document.getElementById('deleteConfirmationUI');\n    if (btn && ui) { btn.style.display = 'none'; ui.style.display = 'block'; }\n};\n\nwindow.cancelDeleteHistory = function() {\n    var btn = document.getElementById('deleteHistoryBtn');\n    var ui = document.getElementById('deleteConfirmationUI');\n    if (btn && ui) { btn.style.display = 'block'; ui.style.display = 'none'; }\n};\n\nwindow.confirmDeleteHistory = function() {\n    var btn = document.getElementById('deleteHistoryBtn');\n    var ui = document.getElementById('deleteConfirmationUI');\n    var confirmBtn = ui.querySelector('button:last-child');\n    confirmBtn.disabled = true;\n    confirmBtn.textContent = ANONCAM_DATA.lang.chat_history_deleting;\n    confirmBtn.style.opacity = '0.6';\n\n    jQuery.ajax({\n        url: ANONCAM_DATA.ajax_url,\n        type: 'POST',\n        data: { action: 'meetgle_delete_chat_history' },\n        success: function(response) {\n            if (response.success) {\n                var listWrapper = document.getElementById('chatHistoryListWrapper');\n                var list = document.getElementById('chatHistoryList');\n                var empty = document.getElementById('chatHistoryEmpty');\n                var endMessage = document.getElementById('chatHistoryEnd');\n\n                if (listWrapper) listWrapper.style.display = 'none';\n                if (list) list.innerHTML = '';\n                if (endMessage) endMessage.style.display = 'none';\n\n                if (empty) {\n                    empty.style.display = 'block';\n                    empty.innerHTML = '<div style=\"text-align:center;padding:48px 0;\"><div style=\"font-size:32px;margin-bottom:12px;\">\u2705<\/div><div style=\"color:#10B981;font-size:14px;font-weight:600;\">' + ANONCAM_DATA.lang.chat_history_deleted_title + '<\/div><div style=\"color:rgba(255,255,255,0.35);font-size:12px;margin-top:4px;\">' + ANONCAM_DATA.lang.chat_history_deleted_desc + '<\/div><\/div>';\n                }\n\n                ui.style.display = 'none';\n                btn.style.display = 'block';\n                chatHistoryOffset = 0;\n                chatHistoryHasMore = true;\n            } else {\n                alert(ANONCAM_DATA.lang.js_chat_history_delete_fail);\n                confirmBtn.disabled = false;\n                confirmBtn.textContent = ANONCAM_DATA.lang.chat_history_confirm_delete;\n                confirmBtn.style.opacity = '1';\n            }\n        },\n        error: function() {\n            alert(ANONCAM_DATA.lang.js_chat_history_network_error);\n            confirmBtn.disabled = false;\n            confirmBtn.textContent = ANONCAM_DATA.lang.chat_history_confirm_delete;\n            confirmBtn.style.opacity = '1';\n        }\n    });\n};\n\n\/\/ Helper: country code to flag emoji\nfunction getCountryFlagEmoji(cc) {\n    if (!cc || cc.length !== 2) return '';\n    return String.fromCodePoint(...cc.toUpperCase().split('').map(function(c) { return 127397 + c.charCodeAt(); }));\n}\n\n\/\/ Close on backdrop click\ndocument.addEventListener('DOMContentLoaded', function() {\n    var modal = document.getElementById('meetgleChatHistoryModal');\n    if (modal) {\n        modal.addEventListener('click', function(e) {\n            if (e.target === this) closeChatHistoryModal();\n        });\n    }\n});\n\n\/\/ Close on Escape\ndocument.addEventListener('keydown', function(e) {\n    if (e.key === 'Escape') closeChatHistoryModal();\n});\n<\/script>\n        \n        <!-- Transactions Modal -->\n        \n<!-- Transactions History Modal -->\n<div id=\"meetgleTransactionsModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content transactions-modal-content\" style=\"max-width:700px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 24px 0 24px;display:flex;align-items:center;justify-content:space-between;\">\n            <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Transactions<\/h2>\n            <button onclick=\"closeTransactionsModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n        <\/div>\n\n        <!-- Content -->\n        <div id=\"transactionsContent\" style=\"padding:16px 24px 24px 24px;max-height:calc(80vh - 80px);overflow-y:auto;\">\n\n            <!-- Loading State -->\n            <div id=\"transactionsLoading\" style=\"text-align:center;padding:48px 0;\">\n                <div style=\"width:32px;height:32px;border:3px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.5);border-radius:50%;margin:0 auto 12px;animation:txSpin 0.8s linear infinite;\"><\/div>\n                <div style=\"color:rgba(255,255,255,0.35);font-size:13px;\">Loading transactions...<\/div>\n            <\/div>\n\n            <!-- Empty State -->\n            <div id=\"transactionsEmpty\" style=\"display:none;text-align:center;padding:48px 0;\">\n                <div style=\"font-size:32px;margin-bottom:12px;opacity:0.5;\">\u26a1<\/div>\n                <div style=\"color:rgba(255,255,255,0.4);font-size:14px;\">No transactions yet<\/div>\n                <div style=\"color:rgba(255,255,255,0.25);font-size:12px;margin-top:4px;\">Start earning sparks to see your history!<\/div>\n            <\/div>\n\n            <!-- Transactions List -->\n            <div id=\"transactionsListWrapper\" style=\"display:none;\">\n                <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                    <div style=\"width:6px;height:6px;border-radius:50%;background:#F59E0B;\"><\/div>\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;\">History<\/span>\n                <\/div>\n                <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden;\">\n                    <div id=\"transactionsList\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Load More Indicator -->\n            <div id=\"transactionsLoadMore\" style=\"display:none;text-align:center;padding:16px 0;\">\n                <div style=\"width:24px;height:24px;border:2px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.5);border-radius:50%;margin:0 auto 8px;animation:txSpin 0.8s linear infinite;\"><\/div>\n                <div style=\"color:rgba(255,255,255,0.35);font-size:12px;\">Loading more...<\/div>\n            <\/div>\n\n            <!-- End of History Message -->\n            <div id=\"transactionsEnd\" style=\"display:none;text-align:center;padding:16px 0;\">\n                <div style=\"color:rgba(255,255,255,0.25);font-size:12px;\">No more transactions to load<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n@keyframes txSpin {\n    to { transform: rotate(360deg); }\n}\n\n\/* Scrollbar hiding *\/\n.transactions-modal-content {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.transactions-modal-content::-webkit-scrollbar {\n    display: none;\n}\n#transactionsContent {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n#transactionsContent::-webkit-scrollbar {\n    display: none;\n}\n\n\/* Transaction rows *\/\n.transaction-item {\n    padding: 10px 14px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    transition: background 0.15s;\n    border-bottom: 1px solid rgba(255,255,255,0.04);\n}\n.transaction-item:last-child {\n    border-bottom: none;\n}\n.transaction-item:hover {\n    background: rgba(255,255,255,0.04);\n}\n\n\/* Icon *\/\n.transaction-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 50% !important;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 16px;\n    flex-shrink: 0;\n}\n.transaction-icon.positive {\n    background: rgba(16,185,129,0.1);\n    border: 1px solid rgba(16,185,129,0.15);\n}\n.transaction-icon.negative {\n    background: rgba(239,68,68,0.1);\n    border: 1px solid rgba(239,68,68,0.15);\n}\n\n\/* Info *\/\n.transaction-info {\n    flex: 1;\n    min-width: 0;\n}\n.transaction-action {\n    font-size: 13px;\n    font-weight: 600;\n    color: white;\n    margin: 0 0 2px 0;\n}\n.transaction-reason {\n    font-size: 11px;\n    color: rgba(255,255,255,0.35);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.transaction-balance {\n    font-size: 10px;\n    color: rgba(255,255,255,0.3);\n    background: rgba(255,255,255,0.06);\n    padding: 1px 6px;\n    border-radius: 6px;\n    display: inline-block;\n    margin-top: 3px;\n}\n\n\/* Amount *\/\n.transaction-amount-wrapper {\n    text-align: right;\n    flex-shrink: 0;\n}\n.transaction-amount {\n    font-size: 14px;\n    font-weight: 700;\n    margin: 0 0 2px 0;\n}\n.transaction-amount.positive {\n    color: #10B981;\n}\n.transaction-amount.negative {\n    color: #EF4444;\n}\n.transaction-date {\n    font-size: 11px;\n    color: rgba(255,255,255,0.25);\n    margin: 0;\n}\n\n\/* Mobile fullscreen *\/\n@media (max-width: 900px) {\n    #meetgleTransactionsModal { padding: 0 !important; }\n    #meetgleTransactionsModal > .transactions-modal-content {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        height: 100vh !important;\n        height: 100svh !important;\n        max-height: 100vh !important;\n        max-height: 100svh !important;\n        border-radius: 0 !important;\n    }\n    #transactionsContent {\n        max-height: calc(100svh - 80px) !important;\n    }\n}\n<\/style>\n\n<script>\n\/\/ Transactions state\nlet transactionsOffset = 0;\nlet transactionsLimit = 20;\nlet transactionsHasMore = true;\nlet transactionsLoading = false;\n\n\/\/ Global functions for transactions modal\nwindow.openTransactionsModal = function() {\n    const modal = document.getElementById('meetgleTransactionsModal');\n    if (!modal) return;\n\n    \/\/ Reset state\n    transactionsOffset = 0;\n    transactionsHasMore = true;\n    transactionsLoading = false;\n\n    modal.style.display = 'flex';\n    loadTransactions(true); \/\/ true = initial load\n};\n\nwindow.closeTransactionsModal = function() {\n    const modal = document.getElementById('meetgleTransactionsModal');\n    if (modal) {\n        modal.style.display = 'none';\n    }\n};\n\n\/\/ Load transactions via AJAX with pagination\nfunction loadTransactions(isInitial = false) {\n    if (transactionsLoading || !transactionsHasMore) return;\n\n    const loading = document.getElementById('transactionsLoading');\n    const loadMore = document.getElementById('transactionsLoadMore');\n    const empty = document.getElementById('transactionsEmpty');\n    const list = document.getElementById('transactionsList');\n    const listWrapper = document.getElementById('transactionsListWrapper');\n    const endMessage = document.getElementById('transactionsEnd');\n\n    \/\/ Check if user is logged in\n    if (typeof ANONCAM_DATA === 'undefined' || !ANONCAM_DATA.isUserLoggedIn) {\n        loading.style.display = 'none';\n        empty.style.display = 'block';\n        empty.innerHTML = '<div style=\"text-align:center;padding:48px 0;\"><div style=\"font-size:28px;margin-bottom:12px;\">\ud83d\udd12<\/div><div style=\"color:rgba(255,255,255,0.4);font-size:14px;font-weight:600;\">' + (ANONCAM_DATA.lang.transactions_login_required || 'Login Required') + '<\/div><div style=\"color:rgba(255,255,255,0.25);font-size:12px;margin-top:4px;\">' + (ANONCAM_DATA.lang.transactions_login_hint || 'You need to be logged in to view your transactions.') + '<\/div><\/div>';\n        return;\n    }\n\n    transactionsLoading = true;\n\n    \/\/ Show appropriate loading indicator\n    if (isInitial) {\n        loading.style.display = 'block';\n        empty.style.display = 'none';\n        listWrapper.style.display = 'none';\n        loadMore.style.display = 'none';\n        endMessage.style.display = 'none';\n    } else {\n        loadMore.style.display = 'block';\n        endMessage.style.display = 'none';\n    }\n\n    jQuery.ajax({\n        url: ANONCAM_DATA.ajax_url,\n        type: 'POST',\n        data: {\n            action: 'meetgle_get_user_transactions',\n            offset: transactionsOffset,\n            limit: transactionsLimit\n        },\n        success: function(response) {\n            transactionsLoading = false;\n            loading.style.display = 'none';\n            loadMore.style.display = 'none';\n\n            if (response.success && response.data.transactions && response.data.transactions.length > 0) {\n                renderTransactions(response.data.transactions, isInitial);\n                listWrapper.style.display = 'block';\n\n                \/\/ Update offset\n                transactionsOffset += response.data.transactions.length;\n\n                \/\/ Check if there are more items\n                if (response.data.transactions.length < transactionsLimit) {\n                    transactionsHasMore = false;\n                    endMessage.style.display = 'block';\n                }\n            } else {\n                if (isInitial) {\n                    \/\/ No transactions at all\n                    empty.style.display = 'block';\n                } else {\n                    \/\/ No more items to load\n                    transactionsHasMore = false;\n                    endMessage.style.display = 'block';\n                }\n            }\n        },\n        error: function() {\n            transactionsLoading = false;\n            loading.style.display = 'none';\n            loadMore.style.display = 'none';\n            if (isInitial) {\n                empty.style.display = 'block';\n            }\n        }\n    });\n}\n\n\/\/ Render transaction items\nfunction renderTransactions(transactions, isInitial = false) {\n    const list = document.getElementById('transactionsList');\n\n    \/\/ Clear list on initial load\n    if (isInitial) {\n        list.innerHTML = '';\n    }\n\n    transactions.forEach(transaction => {\n        const item = document.createElement('div');\n        const isPositive = transaction.amount > 0;\n        item.className = 'transaction-item ' + (isPositive ? 'positive' : 'negative');\n\n        \/\/ Get icon based on action type\n        const iconMap = {\n            'earned': '\u2705',\n            'spark_sent': '\u26a1',\n            'spark_received': '\ud83d\udc8e',\n            'profile_transfer_sent': '\ud83d\udce4',\n            'profile_transfer_received': '\ud83d\udce5',\n            'message_sent': '\u2709\ufe0f',\n            'message_received': '\ud83d\udcec',\n            'store_purchase': '\ud83d\uded2',\n            'purchase': '\ud83d\udcb3',\n            'admin_add': '\u2795',\n            'admin_remove': '\u2796',\n            'admin_set': '\ud83d\udd27',\n            'streak_milestone': '\ud83d\udd25',\n            'streak_freeze_purchase': '\u2744\ufe0f',\n            'promotion_claim': '\ud83c\udf81'\n        };\n        const icon = iconMap[transaction.action_type] || '\ud83d\udc8e';\n\n        \/\/ Format action type for display with proper capitalization\n        const actionMap = {\n            'earned': (ANONCAM_DATA.lang.tx_earned || 'Earned'),\n            'spark_sent': (ANONCAM_DATA.lang.tx_spark_sent || 'Spark Sent'),\n            'spark_received': (ANONCAM_DATA.lang.tx_spark_received || 'Spark Received'),\n            'profile_transfer_sent': (ANONCAM_DATA.lang.tx_transfer_sent || 'Transfer Sent'),\n            'profile_transfer_received': (ANONCAM_DATA.lang.tx_transfer_received || 'Transfer Received'),\n            'message_sent': (ANONCAM_DATA.lang.tx_message_sent || 'Message Sent'),\n            'message_received': (ANONCAM_DATA.lang.tx_message_received || 'Message Received'),\n            'store_purchase': (ANONCAM_DATA.lang.tx_store_purchase || 'Store Purchase'),\n            'purchase': (ANONCAM_DATA.lang.tx_purchase || 'Purchase'),\n            'admin_add': (ANONCAM_DATA.lang.tx_admin_add || 'Admin Added'),\n            'admin_remove': (ANONCAM_DATA.lang.tx_admin_remove || 'Admin Removed'),\n            'admin_set': (ANONCAM_DATA.lang.tx_admin_set || 'Admin Set'),\n            'streak_milestone': (ANONCAM_DATA.lang.tx_streak_milestone || 'Streak Reward'),\n            'streak_freeze_purchase': (ANONCAM_DATA.lang.tx_streak_freeze || 'Streak Freeze'),\n            'promotion_claim': (ANONCAM_DATA.lang.tx_promotion_claim || 'Promotion Claim')\n        };\n        const actionLabel = actionMap[transaction.action_type] || formatActionType(transaction.action_type);\n\n        item.innerHTML = `\n            <div class=\"transaction-icon ${isPositive ? 'positive' : 'negative'}\">\n                ${icon}\n            <\/div>\n            <div class=\"transaction-info\">\n                <div class=\"transaction-action\">${actionLabel}<\/div>\n                <div class=\"transaction-reason\">${transaction.reason}<\/div>\n                <div class=\"transaction-balance\">${ANONCAM_DATA.lang.transactions_balance || 'Balance:'} ${transaction.balance_after} \u26a1<\/div>\n            <\/div>\n            <div class=\"transaction-amount-wrapper\">\n                <div class=\"transaction-amount ${isPositive ? 'positive' : 'negative'}\">\n                    ${isPositive ? '+' : ''}${transaction.amount}\n                <\/div>\n                <div class=\"transaction-date\">${transaction.time_ago}<\/div>\n            <\/div>\n        `;\n\n        list.appendChild(item);\n    });\n}\n\n\/\/ Helper function to format any action type that's not in the map\nfunction formatActionType(actionType) {\n    \/\/ Convert snake_case to Title Case\n    return actionType\n        .split('_')\n        .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n        .join(' ');\n}\n\n\/\/ Setup infinite scroll\ndocument.addEventListener('DOMContentLoaded', function() {\n    const content = document.getElementById('transactionsContent');\n    if (content) {\n        content.addEventListener('scroll', function() {\n            \/\/ Check if scrolled near bottom (within 100px)\n            if (content.scrollHeight - content.scrollTop - content.clientHeight < 100) {\n                loadTransactions(false);\n            }\n        });\n    }\n});\n\n\/\/ Close modal on backdrop click\ndocument.addEventListener('DOMContentLoaded', function() {\n    const modal = document.getElementById('meetgleTransactionsModal');\n    if (modal) {\n        modal.addEventListener('click', function(e) {\n            if (e.target === this || e.target.classList.contains('meetgle-modal-backdrop')) {\n                closeTransactionsModal();\n            }\n        });\n    }\n});\n\n\/\/ Close modal on Escape key\ndocument.addEventListener('keydown', function(e) {\n    if (e.key === 'Escape') {\n        const modal = document.getElementById('meetgleTransactionsModal');\n        if (modal && modal.style.display === 'flex') {\n            closeTransactionsModal();\n        }\n    }\n});\n<\/script>\n        \n        <!-- Notifications Modal -->\n        \n<!-- Notifications Modal -->\n<div id=\"notificationsModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content notifications-modal-content\" style=\"max-width:700px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 24px 0 24px;display:flex;align-items:center;justify-content:space-between;\">\n            <div style=\"display:flex;align-items:center;gap:10px;\">\n                <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Notifications<\/h2>\n                <span id=\"notificationsUnreadBadgeHeader\" style=\"background:rgba(245,158,11,0.15);color:#F59E0B;font-size:12px;font-weight:700;padding:3px 10px;border-radius:10px;border:1px solid rgba(245,158,11,0.25);display:none;\">\n                    0                <\/span>\n            <\/div>\n            <button onclick=\"closeNotificationsModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n        <\/div>\n\n        <!-- Content -->\n        <div id=\"notificationsContainer\" style=\"padding:16px 24px 24px 24px;max-height:calc(80vh - 80px);overflow-y:auto;\">\n\n            <!-- Loading state -->\n            <div id=\"notificationsLoading\" style=\"text-align:center;padding:48px 0;\">\n                <div class=\"spinner\" style=\"margin:0 auto 12px auto;\"><\/div>\n                <div style=\"color:rgba(255,255,255,0.35);font-size:13px;\">Loading notifications...<\/div>\n            <\/div>\n\n            <!-- Empty state -->\n            <div id=\"notificationsEmpty\" style=\"display:none;text-align:center;padding:48px 0;\">\n                <div style=\"font-size:32px;margin-bottom:12px;opacity:0.5;\">\ud83d\udd14<\/div>\n                <div style=\"color:rgba(255,255,255,0.4);font-size:14px;\">No notifications yet<\/div>\n                <div style=\"color:rgba(255,255,255,0.25);font-size:12px;margin-top:4px;\">You&#039;ll see updates here when you receive sparks or make purchases<\/div>\n            <\/div>\n\n            <!-- Notifications list -->\n            <div id=\"notificationsList\" class=\"notifications-list\" style=\"display:none;\">\n                <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                    <div style=\"width:6px;height:6px;border-radius:50%;background:#F59E0B;\"><\/div>\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;\">Recent<\/span>\n                <\/div>\n                <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden;\">\n                <\/div>\n            <\/div>\n\n            <!-- Load more -->\n            <div id=\"loadMoreNotifications\" style=\"display:none;text-align:center;padding:16px 0;\">\n                <button onclick=\"loadMoreNotifications()\" style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:rgba(255,255,255,0.5);font-size:13px;font-weight:600;padding:10px 24px;cursor:pointer;transition:all 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.1)';this.style.color='rgba(255,255,255,0.7)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.06)';this.style.color='rgba(255,255,255,0.5)'\">\n                    Load More                <\/button>\n            <\/div>\n\n            <!-- Mark All Read (inline, no footer) -->\n            <div id=\"notificationsFooter\" style=\"text-align:center;padding:12px 0 0 0;display:none;\">\n                <button id=\"markAllReadBtn\" onclick=\"markAllNotificationsRead()\" style=\"background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:rgba(255,255,255,0.5);font-size:13px;font-weight:600;padding:10px 24px;cursor:pointer;transition:all 0.2s;width:100%;\" onmouseover=\"this.style.background='rgba(255,255,255,0.1)';this.style.color='rgba(255,255,255,0.7)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.06)';this.style.color='rgba(255,255,255,0.5)'\">\n                    Mark All As Read                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Scrollbar hiding *\/\n.notifications-modal-content {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.notifications-modal-content::-webkit-scrollbar {\n    display: none;\n}\n#notificationsContainer {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n#notificationsContainer::-webkit-scrollbar {\n    display: none;\n}\n\n\/* Spinner *\/\n#notificationsModal .spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid rgba(255,255,255,0.1);\n    border-top-color: rgba(255,255,255,0.5);\n    border-radius: 50%;\n    animation: notifSpin 0.8s linear infinite;\n}\n@keyframes notifSpin {\n    to { transform: rotate(360deg); }\n}\n\n\/* Notification items *\/\n.notification-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 12px 14px;\n    cursor: pointer;\n    transition: background 0.15s;\n    position: relative;\n    border-bottom: 1px solid rgba(255,255,255,0.04);\n}\n.notification-item:last-child {\n    border-bottom: none;\n}\n.notification-item:hover {\n    background: rgba(255,255,255,0.06);\n}\n.notification-item.unread {\n    background: rgba(245,158,11,0.04);\n}\n.notification-item.unread:hover {\n    background: rgba(245,158,11,0.08);\n}\n\n\/* Icon *\/\n.notification-icon {\n    font-size: 18px;\n    flex-shrink: 0;\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(255,255,255,0.06);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 50% !important;\n}\n.notification-item.unread .notification-icon {\n    background: rgba(245,158,11,0.1);\n    border-color: rgba(245,158,11,0.15);\n}\n\n\/* Content *\/\n.notification-content {\n    flex: 1;\n    min-width: 0;\n}\n.notification-title {\n    font-size: 13px;\n    font-weight: 600;\n    color: white;\n    margin: 0 0 3px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n.notification-message {\n    font-size: 12px;\n    color: rgba(255,255,255,0.4);\n    margin: 0 0 3px;\n    line-height: 1.4;\n}\n.notification-time {\n    font-size: 11px;\n    color: rgba(255,255,255,0.25);\n}\n\n\/* Unread dot *\/\n.notification-unread-dot {\n    width: 7px;\n    height: 7px;\n    background: #F59E0B;\n    border-radius: 50%;\n    flex-shrink: 0;\n}\n\n\/* Delete button *\/\n.notification-delete {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    background: none;\n    border: none;\n    color: rgba(255,255,255,0.2);\n    font-size: 16px;\n    cursor: pointer;\n    padding: 4px;\n    line-height: 1;\n    border-radius: 6px;\n    opacity: 0;\n    transition: opacity 0.2s, color 0.2s, background 0.2s;\n}\n.notification-item:hover .notification-delete {\n    opacity: 1;\n}\n.notification-delete:hover {\n    color: #EF4444;\n    background: rgba(239,68,68,0.1);\n}\n\n\/* Promotion claim button *\/\n.promo-claim-btn {\n    display: inline-block;\n    margin: 6px 0 4px;\n    padding: 5px 14px;\n    font-size: 12px;\n    font-weight: 700;\n    color: #000;\n    background: #F59E0B;\n    border: none;\n    border-radius: 16px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n.promo-claim-btn:hover:not(:disabled) {\n    background: #D97706;\n}\n.promo-claim-btn.promo-claimed {\n    background: rgba(255,255,255,0.08);\n    color: rgba(255,255,255,0.35);\n    cursor: default;\n}\n\n\/* Badge on bell icon (external) *\/\n.notification-bell-badge {\n    position: absolute;\n    top: -4px;\n    right: -4px;\n    background: #EF4444;\n    color: #fff;\n    font-size: 10px;\n    font-weight: 600;\n    min-width: 16px;\n    height: 16px;\n    padding: 0 4px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 2px solid rgba(20,20,30,0.95);\n}\n\n\/* Mobile fullscreen *\/\n@media (max-width: 900px) {\n    #notificationsModal { padding: 0 !important; }\n    #notificationsModal > .notifications-modal-content {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        height: 100vh !important;\n        height: 100svh !important;\n        max-height: 100vh !important;\n        max-height: 100svh !important;\n        border-radius: 0 !important;\n    }\n    #notificationsContainer {\n        max-height: calc(100svh - 80px) !important;\n    }\n}\n<\/style>\n\n<script>\n(function() {\n    \/\/ Notifications state\n    let notificationsOffset = 0;\n    const notificationsLimit = 20;\n    let hasMoreNotifications = true;\n    let isLoadingNotifications = false;\n\n    \/\/ Helper to get nonce\n    function getNotificationsNonce() {\n        return (typeof ANONCAM_DATA !== 'undefined' && ANONCAM_DATA.notifications_nonce)\n            ? ANONCAM_DATA.notifications_nonce\n            : '';\n    }\n\n    \/\/ Make functions globally accessible\n    window.openNotificationsModal = function() {\n        const modal = document.getElementById('notificationsModal');\n        if (modal) {\n            modal.style.display = 'flex';\n            document.body.style.overflow = 'hidden';\n\n            \/\/ Reset and load notifications\n            notificationsOffset = 0;\n            hasMoreNotifications = true;\n            \/\/ Clear the inner container of the list wrapper\n            const listEl = document.getElementById('notificationsList');\n            const innerContainer = listEl ? listEl.querySelector('div:last-child') : null;\n            if (innerContainer) innerContainer.innerHTML = '';\n            listEl.style.display = 'none';\n            loadNotifications();\n        }\n    };\n\n    window.closeNotificationsModal = function() {\n        const modal = document.getElementById('notificationsModal');\n        if (modal) {\n            modal.style.display = 'none';\n            document.body.style.overflow = '';\n        }\n    };\n\n    window.loadNotifications = function() {\n        if (isLoadingNotifications || !hasMoreNotifications) return;\n\n        isLoadingNotifications = true;\n        const loadingEl = document.getElementById('notificationsLoading');\n        const emptyEl = document.getElementById('notificationsEmpty');\n        const listEl = document.getElementById('notificationsList');\n        const loadMoreBtn = document.getElementById('loadMoreNotifications');\n\n        \/\/ Show loading on first load\n        if (notificationsOffset === 0) {\n            loadingEl.style.display = 'block';\n            emptyEl.style.display = 'none';\n            loadMoreBtn.style.display = 'none';\n        }\n\n        const formData = new FormData();\n        formData.append('action', 'meetgle_get_notifications');\n        formData.append('nonce', getNotificationsNonce());\n        formData.append('offset', notificationsOffset);\n        formData.append('limit', notificationsLimit);\n\n        fetch(ANONCAM_DATA.ajax_url, {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            loadingEl.style.display = 'none';\n            isLoadingNotifications = false;\n\n            if (data.success) {\n                const notifications = data.data.notifications;\n\n                \/\/ Update unread count badge\n                updateUnreadBadge(data.data.unread_count);\n\n                if (notifications.length === 0 && notificationsOffset === 0) {\n                    \/\/ Show empty state\n                    emptyEl.style.display = 'block';\n                    loadMoreBtn.style.display = 'none';\n                } else {\n                    emptyEl.style.display = 'none';\n                    listEl.style.display = 'block';\n\n                    \/\/ Render into the inner container\n                    const innerContainer = listEl.querySelector('div:last-child');\n                    notifications.forEach(notification => {\n                        innerContainer.appendChild(createNotificationElement(notification));\n                    });\n\n                    \/\/ Update offset\n                    notificationsOffset += notifications.length;\n\n                    \/\/ Show\/hide load more\n                    hasMoreNotifications = notifications.length === notificationsLimit;\n                    loadMoreBtn.style.display = hasMoreNotifications ? 'block' : 'none';\n                }\n            }\n        })\n        .catch(err => {\n            console.error('Failed to load notifications:', err);\n            loadingEl.style.display = 'none';\n            isLoadingNotifications = false;\n        });\n    };\n\n    window.loadMoreNotifications = function() {\n        loadNotifications();\n    };\n\n    function createNotificationElement(notification) {\n        const div = document.createElement('div');\n        div.className = 'notification-item' + (notification.is_read ? '' : ' unread');\n        div.dataset.id = notification.id;\n\n        \/\/ Check if this is a claimable promotion notification\n        const data = notification.data || {};\n        const isPromotion = notification.type === 'promotion' && data.action === 'claim' && data.promotion_id;\n        const isClaimed = data.claimed === true || data.claimed === '1';\n\n        let claimButtonHtml = '';\n        if (isPromotion) {\n            if (isClaimed) {\n                claimButtonHtml = '<button class=\"promo-claim-btn promo-claimed\" disabled>' + (ANONCAM_DATA.lang.js_notif_claimed || 'Claimed') + '<\/button>';\n            } else {\n                claimButtonHtml = '<button class=\"promo-claim-btn\" onclick=\"event.stopPropagation(); claimPromotion(\\'' + escapeHtml(data.promotion_id) + '\\', ' + notification.id + ', this);\">' + (data.spark_amount ? (ANONCAM_DATA.lang.js_notif_claim_sparks || 'Claim Sparks').replace('Sparks', data.spark_amount + ' Sparks') : (ANONCAM_DATA.lang.js_notif_claim_sparks || 'Claim Sparks')) + '<\/button>';\n            }\n        }\n\n        div.innerHTML = `\n            <div class=\"notification-icon\">${notification.icon}<\/div>\n            <div class=\"notification-content\">\n                <p class=\"notification-title\">\n                    ${escapeHtml(notification.title)}\n                    ${notification.is_read ? '' : '<span class=\"notification-unread-dot\"><\/span>'}\n                <\/p>\n                <p class=\"notification-message\">${escapeHtml(notification.message)}<\/p>\n                ${claimButtonHtml}\n                <span class=\"notification-time\">${notification.time_ago}<\/span>\n            <\/div>\n            <button class=\"notification-delete\" onclick=\"event.stopPropagation(); deleteNotification(${notification.id}, this);\" title=\"Delete\">&times;<\/button>\n        `;\n\n        \/\/ Mark as read on click\n        div.addEventListener('click', function() {\n            if (!notification.is_read) {\n                markNotificationRead(notification.id, div);\n            }\n        });\n\n        return div;\n    }\n\n    window.markNotificationRead = function(notificationId, element) {\n        const formData = new FormData();\n        formData.append('action', 'meetgle_mark_notification_read');\n        formData.append('nonce', getNotificationsNonce());\n        formData.append('notification_id', notificationId);\n\n        fetch(ANONCAM_DATA.ajax_url, {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            if (data.success) {\n                \/\/ Update UI\n                element.classList.remove('unread');\n                const dot = element.querySelector('.notification-unread-dot');\n                if (dot) dot.remove();\n\n                updateUnreadBadge(data.data.unread_count);\n            }\n        });\n    };\n\n    window.markAllNotificationsRead = function() {\n        const formData = new FormData();\n        formData.append('action', 'meetgle_mark_all_notifications_read');\n        formData.append('nonce', getNotificationsNonce());\n\n        fetch(ANONCAM_DATA.ajax_url, {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            if (data.success) {\n                \/\/ Update all items in UI\n                document.querySelectorAll('.notification-item.unread').forEach(item => {\n                    item.classList.remove('unread');\n                    const dot = item.querySelector('.notification-unread-dot');\n                    if (dot) dot.remove();\n                });\n\n                updateUnreadBadge(0);\n            }\n        });\n    };\n\n    window.deleteNotification = function(notificationId, buttonEl) {\n        const item = buttonEl.closest('.notification-item');\n\n        const formData = new FormData();\n        formData.append('action', 'meetgle_delete_notification');\n        formData.append('nonce', getNotificationsNonce());\n        formData.append('notification_id', notificationId);\n\n        \/\/ Optimistic UI update\n        item.style.opacity = '0.5';\n\n        fetch(ANONCAM_DATA.ajax_url, {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            if (data.success) {\n                item.remove();\n                updateUnreadBadge(data.data.unread_count);\n\n                \/\/ Check if list is empty\n                const listEl = document.getElementById('notificationsList');\n                const innerContainer = listEl ? listEl.querySelector('div:last-child') : null;\n                if (innerContainer && innerContainer.children.length === 0) {\n                    listEl.style.display = 'none';\n                    document.getElementById('notificationsEmpty').style.display = 'block';\n                }\n            } else {\n                item.style.opacity = '1';\n            }\n        })\n        .catch(() => {\n            item.style.opacity = '1';\n        });\n    };\n\n    function updateUnreadBadge(count) {\n        \/\/ Update header badge\n        const headerBadge = document.getElementById('notificationsUnreadBadgeHeader');\n        if (headerBadge) {\n            headerBadge.textContent = count;\n            headerBadge.style.display = count > 0 ? 'inline-flex' : 'none';\n        }\n\n        \/\/ Update bell icon badge\n        const bellBadge = document.getElementById('notificationsBellBadge');\n        if (bellBadge) {\n            bellBadge.textContent = count > 99 ? '99+' : count;\n            bellBadge.style.display = count > 0 ? 'flex' : 'none';\n        }\n\n        \/\/ Update footer with mark all read button\n        const footer = document.getElementById('notificationsFooter');\n        if (footer) {\n            footer.style.display = count > 0 ? 'block' : 'none';\n        }\n    }\n\n    \/\/ Global function to refresh unread count (can be called from other scripts)\n    window.refreshNotificationCount = function() {\n        const formData = new FormData();\n        formData.append('action', 'meetgle_get_unread_count');\n        formData.append('nonce', getNotificationsNonce());\n\n        fetch(ANONCAM_DATA.ajax_url, {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            if (data.success) {\n                updateUnreadBadge(data.data.unread_count);\n            }\n        });\n    };\n\n    window.claimPromotion = function(promotionId, notificationId, buttonEl) {\n        if (buttonEl.disabled) return;\n        buttonEl.disabled = true;\n        buttonEl.textContent = (ANONCAM_DATA.lang.js_notif_claiming || 'Claiming...');\n\n        const formData = new FormData();\n        formData.append('action', 'meetgle_claim_promotion');\n        formData.append('nonce', getNotificationsNonce());\n        formData.append('promotion_id', promotionId);\n\n        fetch(ANONCAM_DATA.ajax_url, {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            if (data.success) {\n                buttonEl.textContent = (ANONCAM_DATA.lang.js_notif_claimed_excl || 'Claimed!');\n                buttonEl.classList.add('promo-claimed');\n\n                \/\/ Update spark balance in header\n                if (data.data && data.data.new_balance !== undefined && typeof updateSparkBalanceDisplay === 'function') {\n                    updateSparkBalanceDisplay(data.data.new_balance);\n                }\n            } else {\n                const msg = (data.data && data.data.message) || (ANONCAM_DATA.lang.js_notif_claim_failed || 'Claim failed');\n                if (msg.toLowerCase().includes('already')) {\n                    buttonEl.textContent = (ANONCAM_DATA.lang.js_notif_claimed || 'Claimed');\n                    buttonEl.classList.add('promo-claimed');\n                } else {\n                    buttonEl.textContent = msg;\n                    setTimeout(() => {\n                        buttonEl.textContent = (ANONCAM_DATA.lang.js_notif_claim_sparks || 'Claim Sparks');\n                        buttonEl.disabled = false;\n                    }, 3000);\n                }\n            }\n        })\n        .catch(() => {\n            buttonEl.textContent = (ANONCAM_DATA.lang.js_notif_error_retry || 'Error - Retry');\n            buttonEl.disabled = false;\n        });\n    };\n\n    function escapeHtml(text) {\n        const div = document.createElement('div');\n        div.textContent = text;\n        return div.innerHTML;\n    }\n\n    \/\/ Close on Escape key\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape') {\n            closeNotificationsModal();\n        }\n    });\n\n    \/\/ Close on backdrop click\n    document.addEventListener('DOMContentLoaded', function() {\n        const modal = document.getElementById('notificationsModal');\n        if (modal) {\n            modal.addEventListener('click', function(e) {\n                if (e.target === this || e.target.classList.contains('meetgle-modal-backdrop')) {\n                    closeNotificationsModal();\n                }\n            });\n        }\n    });\n\n    \/\/ Poll for new notifications every 60 seconds (only if page is visible)\n    setInterval(function() {\n        if (!document.hidden && typeof ANONCAM_DATA !== 'undefined' && ANONCAM_DATA.isUserLoggedIn) {\n            refreshNotificationCount();\n        }\n    }, 60000);\n})();\n<\/script>\n\n        <!-- Referral Modal -->\n                \n        <!-- Favorites Modal -->\n        \n<!-- Favorites Modal -->\n<div id=\"meetgleFavoritesModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content favorites-modal-content\" style=\"max-width:700px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 24px 0 24px;display:flex;align-items:center;justify-content:space-between;\">\n            <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">My Favorites<\/h2>\n            <button onclick=\"closeFavoritesModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n        <\/div>\n\n        <!-- Content -->\n        <div id=\"favoritesContent\" style=\"padding:16px 24px 24px 24px;overflow-y:auto;max-height:calc(80vh - 80px);\">\n\n            <!-- Loading State -->\n            <div id=\"favoritesLoading\" style=\"text-align:center;padding:48px 0;\">\n                <div style=\"width:32px;height:32px;border:3px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.5);border-radius:50%;margin:0 auto 12px;animation:favSpin 0.8s linear infinite;\"><\/div>\n                <div style=\"color:rgba(255,255,255,0.35);font-size:13px;\">Loading your favorites...<\/div>\n            <\/div>\n\n            <!-- Empty State -->\n            <div id=\"favoritesEmpty\" style=\"display:none;text-align:center;padding:48px 0;\">\n                <div style=\"font-size:32px;margin-bottom:12px;opacity:0.5;\">\ud83d\udc94<\/div>\n                <div style=\"color:rgba(255,255,255,0.4);font-size:14px;\">No favorites yet<\/div>\n                <div style=\"color:rgba(255,255,255,0.25);font-size:12px;margin-top:4px;\">Click the heart on someone&#039;s profile to add them!<\/div>\n            <\/div>\n\n            <!-- Login Required State -->\n            <div id=\"favoritesLoginRequired\" style=\"display:none;\">\n                <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;\">\n                    <div style=\"font-size:20px;flex-shrink:0;\">\ud83d\udd12<\/div>\n                    <div style=\"flex:1;min-width:0;\">\n                        <div style=\"color:white;font-weight:600;font-size:13px;\">Login Required<\/div>\n                        <div style=\"color:rgba(255,255,255,0.35);font-size:11px;\">You need to be logged in to view your favorites.<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Favorites List -->\n            <div id=\"favoritesListWrapper\" style=\"display:none;\">\n                <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                    <div style=\"width:6px;height:6px;border-radius:50%;background:#EC4899;\"><\/div>\n                    <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;\">Your Favorites<\/span>\n                    <span style=\"color:rgba(255,255,255,0.25);font-size:11px;margin-left:auto;\">mutual favorites = \ud83d\udc95<\/span>\n                <\/div>\n                <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden;\">\n                    <div id=\"favoritesList\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Load More Indicator -->\n            <div id=\"favoritesLoadMore\" style=\"display:none;text-align:center;padding:16px 0;\">\n                <div style=\"width:24px;height:24px;border:2px solid rgba(255,255,255,0.1);border-top-color:rgba(255,255,255,0.5);border-radius:50%;margin:0 auto 8px;animation:favSpin 0.8s linear infinite;\"><\/div>\n                <div style=\"color:rgba(255,255,255,0.35);font-size:12px;\">Loading more...<\/div>\n            <\/div>\n\n            <!-- End of List Message -->\n            <div id=\"favoritesEnd\" style=\"display:none;text-align:center;padding:16px 0;\">\n                <div style=\"color:rgba(255,255,255,0.25);font-size:12px;\">No more favorites to load<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n@keyframes favSpin {\n    to { transform: rotate(360deg); }\n}\n\n\/* Scrollbar hiding *\/\n.favorites-modal-content {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.favorites-modal-content::-webkit-scrollbar {\n    display: none;\n}\n#favoritesContent {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n#favoritesContent::-webkit-scrollbar {\n    display: none;\n}\n\n\/* Favorite items \u2014 row layout like chat history *\/\n.favorite-item {\n    padding: 10px 14px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    cursor: pointer;\n    transition: background 0.15s;\n    border-bottom: 1px solid rgba(255,255,255,0.04);\n    position: relative;\n}\n.favorite-item:last-child {\n    border-bottom: none;\n}\n.favorite-item:hover {\n    background: rgba(255,255,255,0.06);\n}\n.favorite-item.mutual {\n    background: transparent;\n}\n.favorite-item.mutual:hover {\n    background: rgba(255,255,255,0.06);\n}\n\n\/* Avatar *\/\n.favorite-avatar-wrapper {\n    position: relative;\n    flex-shrink: 0;\n}\n.favorite-avatar {\n    width: 40px;\n    height: 40px;\n    border-radius: 50% !important;\n    object-fit: cover;\n    border: 1px solid rgba(255,255,255,0.1);\n}\n.favorite-item.mutual .favorite-avatar {\n    border-color: rgba(255,255,255,0.1);\n}\n\n\/* Mutual badge \u2014 small \ud83d\udc95 text beside username instead of overlay *\/\n.favorite-mutual-badge {\n    display: none;\n}\n\n\/* Info *\/\n.favorite-info {\n    flex: 1;\n    min-width: 0;\n}\n.favorite-username {\n    color: white;\n    font-weight: 600;\n    font-size: 14px;\n    margin: 0 0 2px 0;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n.favorite-meta {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    margin-top: 2px;\n}\n.favorite-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 10px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n}\n.favorite-time {\n    color: rgba(255,255,255,0.3);\n    font-size: 11px;\n}\n.favorite-flag {\n    font-size: 14px;\n    line-height: 1;\n}\n\n\/* Remove button *\/\n.favorite-remove-btn {\n    background: none;\n    border: none;\n    border-radius: 50%;\n    width: 28px;\n    height: 28px;\n    min-width: 28px;\n    min-height: 28px;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all 0.2s;\n    flex-shrink: 0;\n    font-size: 13px;\n    color: rgba(255,255,255,0.2);\n    line-height: 1;\n    box-sizing: border-box;\n}\n.favorite-remove-btn:hover {\n    background: rgba(239,68,68,0.15);\n    color: #EF4444;\n}\n\n\/* Verification badges *\/\n.favorite-verification-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    font-size: 8px;\n    color: white;\n    font-weight: bold;\n}\n.favorite-verification-badge.gold {\n    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n}\n.favorite-verification-badge.blue {\n    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n}\n\n\/* Mobile fullscreen *\/\n@media (max-width: 900px) {\n    #meetgleFavoritesModal { padding: 0 !important; }\n    #meetgleFavoritesModal > .favorites-modal-content {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        height: 100vh !important;\n        height: 100svh !important;\n        max-height: 100vh !important;\n        max-height: 100svh !important;\n        border-radius: 0 !important;\n    }\n    #favoritesContent {\n        max-height: calc(100svh - 80px) !important;\n    }\n}\n<\/style>\n\n<script>\n\/\/ Favorites modal state\nlet favoritesOffset = 0;\nlet favoritesLimit = 20;\nlet favoritesHasMore = true;\nlet favoritesLoading = false;\n\n\/\/ Global functions for favorites modal\nwindow.openFavoritesModal = function() {\n    const modal = document.getElementById('meetgleFavoritesModal');\n    if (!modal) return;\n\n    \/\/ Reset state\n    favoritesOffset = 0;\n    favoritesHasMore = true;\n    favoritesLoading = false;\n\n    modal.style.display = 'flex';\n    loadFavorites(true); \/\/ true = initial load\n};\n\nwindow.closeFavoritesModal = function() {\n    const modal = document.getElementById('meetgleFavoritesModal');\n    if (modal) {\n        modal.style.display = 'none';\n    }\n};\n\n\/\/ Load favorites via AJAX with pagination\nfunction loadFavorites(isInitial = false) {\n    if (favoritesLoading || !favoritesHasMore) return;\n\n    const loading = document.getElementById('favoritesLoading');\n    const loadMore = document.getElementById('favoritesLoadMore');\n    const empty = document.getElementById('favoritesEmpty');\n    const loginRequired = document.getElementById('favoritesLoginRequired');\n    const list = document.getElementById('favoritesList');\n    const listWrapper = document.getElementById('favoritesListWrapper');\n    const endMessage = document.getElementById('favoritesEnd');\n\n    \/\/ Check if user is logged in\n    if (typeof ANONCAM_DATA === 'undefined' || !ANONCAM_DATA.isUserLoggedIn) {\n        loading.style.display = 'none';\n        loginRequired.style.display = 'block';\n        return;\n    }\n\n    favoritesLoading = true;\n\n    \/\/ Show appropriate loading indicator\n    if (isInitial) {\n        loading.style.display = 'block';\n        empty.style.display = 'none';\n        loginRequired.style.display = 'none';\n        listWrapper.style.display = 'none';\n        loadMore.style.display = 'none';\n        endMessage.style.display = 'none';\n    } else {\n        loadMore.style.display = 'block';\n        endMessage.style.display = 'none';\n    }\n\n    jQuery.ajax({\n        url: ANONCAM_DATA.ajax_url,\n        type: 'POST',\n        data: {\n            action: 'meetgle_get_favorites',\n            nonce: ANONCAM_DATA.favorites_nonce,\n            offset: favoritesOffset,\n            limit: favoritesLimit\n        },\n        success: function(response) {\n            favoritesLoading = false;\n            loading.style.display = 'none';\n            loadMore.style.display = 'none';\n\n            if (response.success && response.data.favorites && response.data.favorites.length > 0) {\n                renderFavorites(response.data.favorites, isInitial);\n                listWrapper.style.display = 'block';\n\n                \/\/ Update total count\n                updateFavoritesCount(response.data.total_count);\n\n                \/\/ Update offset\n                favoritesOffset += response.data.favorites.length;\n\n                \/\/ Check if there are more items\n                if (!response.data.has_more) {\n                    favoritesHasMore = false;\n                    if (favoritesOffset > favoritesLimit) {\n                        endMessage.style.display = 'block';\n                    }\n                }\n            } else {\n                if (isInitial) {\n                    \/\/ No favorites at all\n                    empty.style.display = 'block';\n                    updateFavoritesCount(0);\n                } else {\n                    \/\/ No more items to load\n                    favoritesHasMore = false;\n                    endMessage.style.display = 'block';\n                }\n            }\n        },\n        error: function() {\n            favoritesLoading = false;\n            loading.style.display = 'none';\n            loadMore.style.display = 'none';\n            if (isInitial) {\n                empty.style.display = 'block';\n            }\n        }\n    });\n}\n\n\/\/ Render favorite items\nfunction renderFavorites(favorites, isInitial = false) {\n    const list = document.getElementById('favoritesList');\n\n    \/\/ Clear list on initial load\n    if (isInitial) {\n        list.innerHTML = '';\n    }\n\n    favorites.forEach(fav => {\n        const item = document.createElement('div');\n        item.className = 'favorite-item' + (fav.is_mutual ? ' mutual' : '');\n        item.setAttribute('data-user-id', fav.user_id);\n\n        \/\/ Build gender badge HTML\n        let genderBadgeHTML = '';\n        if (fav.gender) {\n            const genderLabel = fav.gender.charAt(0).toUpperCase() + fav.gender.slice(1);\n            const genderColor = fav.gender === 'male' ? '#3B82F6' : '#EC4899';\n            genderBadgeHTML = `<span class=\"favorite-badge\" style=\"background:${genderColor};\">${genderLabel}<\/span>`;\n        }\n\n        \/\/ Build verification badge HTML\n        let verificationBadgeHTML = '';\n        if (fav.verification_type === 'gold') {\n            verificationBadgeHTML = '<span class=\"favorite-verification-badge gold\">\u2713<\/span>';\n        } else if (fav.verification_type === 'blue') {\n            verificationBadgeHTML = '<span class=\"favorite-verification-badge blue\">\u2713<\/span>';\n        }\n\n        \/\/ Build country flag HTML\n        let countryFlagHTML = '';\n        if (fav.country_code) {\n            const flag = getFavoritesCountryFlagEmoji(fav.country_code);\n            if (flag) {\n                countryFlagHTML = `<span class=\"favorite-flag\">${flag}<\/span>`;\n            }\n        }\n\n        \/\/ Build mutual indicator (inline text next to username)\n        let mutualHTML = fav.is_mutual ? '<span style=\"font-size:12px;margin-left:2px;\">\ud83d\udc95<\/span>' : '';\n\n        item.innerHTML = `\n            <div class=\"favorite-avatar-wrapper\" onclick=\"openFavoriteProfile('${fav.username}')\">\n                <img decoding=\"async\" src=\"${fav.avatar_url}\" alt=\"${fav.username}\" class=\"favorite-avatar\">\n            <\/div>\n            <div class=\"favorite-info\" onclick=\"openFavoriteProfile('${fav.username}')\">\n                <div class=\"favorite-username\">\n                    ${fav.username}\n                    ${verificationBadgeHTML}\n                    ${mutualHTML}\n                <\/div>\n                <div class=\"favorite-meta\">\n                    ${genderBadgeHTML}\n                    ${countryFlagHTML}\n                    <span class=\"favorite-time\">${fav.time_ago}<\/span>\n                <\/div>\n            <\/div>\n            <button class=\"favorite-remove-btn\" onclick=\"removeFavoriteFromModal(${fav.user_id}, this)\" title=\"Remove from favorites\">\u2715<\/button>\n        `;\n\n        list.appendChild(item);\n    });\n}\n\n\/\/ Open favorite's profile\nwindow.openFavoriteProfile = function(username) {\n    closeFavoritesModal();\n    if (typeof openMeetgleProfileModal === 'function') {\n        openMeetgleProfileModal(username);\n    }\n};\n\n\/\/ Remove favorite from modal\nwindow.removeFavoriteFromModal = function(userId, buttonElement) {\n    if (!confirm(ANONCAM_DATA.lang.js_favorites_confirm_remove || 'Remove this user from your favorites?')) return;\n\n    \/\/ Disable button\n    buttonElement.disabled = true;\n    buttonElement.style.opacity = '0.5';\n\n    jQuery.ajax({\n        url: ANONCAM_DATA.ajax_url,\n        type: 'POST',\n        data: {\n            action: 'meetgle_remove_favorite',\n            nonce: ANONCAM_DATA.favorites_nonce,\n            favorite_user_id: userId\n        },\n        success: function(response) {\n            if (response.success) {\n                \/\/ Remove item from DOM with animation\n                const item = document.querySelector(`.favorite-item[data-user-id=\"${userId}\"]`);\n                if (item) {\n                    item.style.transition = 'opacity 0.3s, transform 0.3s';\n                    item.style.opacity = '0';\n                    item.style.transform = 'translateX(20px)';\n                    setTimeout(() => {\n                        item.remove();\n\n                        \/\/ Check if list is now empty\n                        const remainingItems = document.querySelectorAll('.favorite-item');\n                        if (remainingItems.length === 0) {\n                            document.getElementById('favoritesListWrapper').style.display = 'none';\n                            document.getElementById('favoritesEmpty').style.display = 'block';\n                        }\n\n                        \/\/ Update count\n                        updateFavoritesCount(response.data.favorites_count);\n                    }, 300);\n                }\n            } else {\n                alert((ANONCAM_DATA.lang.js_favorites_remove_failed || 'Failed to remove:') + ' ' + (response.data || (ANONCAM_DATA.lang.js_favorites_unknown_error || 'Unknown error')));\n                buttonElement.disabled = false;\n                buttonElement.style.opacity = '1';\n            }\n        },\n        error: function() {\n            alert(ANONCAM_DATA.lang.js_favorites_network_error || 'Network error. Please try again.');\n            buttonElement.disabled = false;\n            buttonElement.style.opacity = '1';\n        }\n    });\n};\n\n\/\/ Update favorites count display\nfunction updateFavoritesCount(count) {\n    const countEl = document.getElementById('favoritesTotalCount');\n    if (countEl) countEl.textContent = count;\n}\n\n\/\/ Helper function to convert country code to flag emoji\nfunction getFavoritesCountryFlagEmoji(countryCode) {\n    if (!countryCode || countryCode.length !== 2) return '';\n\n    const codePoints = countryCode\n        .toUpperCase()\n        .split('')\n        .map(char => 127397 + char.charCodeAt());\n\n    return String.fromCodePoint(...codePoints);\n}\n\n\/\/ Setup infinite scroll for favorites\ndocument.addEventListener('DOMContentLoaded', function() {\n    const content = document.getElementById('favoritesContent');\n    if (content) {\n        content.addEventListener('scroll', function() {\n            \/\/ Check if scrolled near bottom (within 100px)\n            if (content.scrollHeight - content.scrollTop - content.clientHeight < 100) {\n                loadFavorites(false);\n            }\n        });\n    }\n});\n\n\/\/ Close modal on backdrop click\ndocument.addEventListener('DOMContentLoaded', function() {\n    const modal = document.getElementById('meetgleFavoritesModal');\n    if (modal) {\n        modal.addEventListener('click', function(e) {\n            if (e.target === this || e.target.classList.contains('meetgle-modal-backdrop')) {\n                closeFavoritesModal();\n            }\n        });\n    }\n});\n\n\/\/ Close modal on Escape key\ndocument.addEventListener('keydown', function(e) {\n    if (e.key === 'Escape') {\n        const modal = document.getElementById('meetgleFavoritesModal');\n        if (modal && modal.style.display !== 'none') {\n            closeFavoritesModal();\n        }\n    }\n});\n<\/script>\n        \n        <!-- Messages Modal -->\n        \n<!-- Messages Modal -->\n<div id=\"messagesModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content messages-modal-content\" style=\"max-width:700px;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Conversations List View -->\n        <div id=\"messagesListView\">\n            <!-- Header -->\n            <div style=\"padding:20px 24px 0 24px;display:flex;align-items:center;justify-content:space-between;\">\n                <div style=\"display:flex;align-items:center;gap:10px;\">\n                    <h2 style=\"color:white;margin:0;font-size:22px;font-weight:700;\">Messages<\/h2>\n                    <span id=\"messagesUnreadBadgeHeader\" class=\"messages-header-badge\" style=\"display:none;\">\n                        0                    <\/span>\n                <\/div>\n                <button onclick=\"closeMessagesModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n            <\/div>\n\n            <!-- Conversations Container -->\n            <div id=\"conversationsContainer\" class=\"messages-container\" style=\"padding:16px 24px 24px 24px;\">\n                <!-- Loading state -->\n                <div id=\"conversationsLoading\" class=\"messages-loading\">\n                    <div class=\"messages-spinner\"><\/div>\n                    <p>Loading conversations...<\/p>\n                <\/div>\n\n                <!-- Empty state -->\n                <div id=\"conversationsEmpty\" class=\"messages-empty\" style=\"display:none;\">\n                    <div style=\"font-size:32px;margin-bottom:12px;opacity:0.5;\">\ud83d\udcac<\/div>\n                    <div style=\"color:rgba(255,255,255,0.4);font-size:14px;\">No conversations yet<\/div>\n                    <div style=\"color:rgba(255,255,255,0.25);font-size:12px;margin-top:4px;\">Start a conversation from someone&#039;s profile!<\/div>\n                <\/div>\n\n                <!-- Conversations list with section header -->\n                <div id=\"conversationsListWrapper\" style=\"display:none;\">\n                    <div style=\"display:flex;align-items:center;gap:8px;margin-bottom:10px;\">\n                        <div style=\"width:6px;height:6px;border-radius:50%;background:#10B981;\"><\/div>\n                        <span style=\"color:rgba(255,255,255,0.45);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;\">Conversations<\/span>\n                    <\/div>\n                    <div style=\"background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;overflow:hidden;\">\n                        <div id=\"conversationsList\" class=\"conversations-list\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Chat View (hidden by default) -->\n        <div id=\"messagesChatView\" style=\"display:none;\">\n            <!-- Chat Header -->\n            <div class=\"messages-chat-header\">\n                <button class=\"messages-back-btn\" onclick=\"showConversationsList()\">\n                    \u2190\n                <\/button>\n                <div class=\"messages-chat-user\" onclick=\"openChatUserProfile()\">\n                    <img decoding=\"async\" id=\"chatUserAvatar\" src=\"\" alt=\"Avatar\" class=\"messages-chat-avatar\">\n                    <div class=\"messages-chat-user-info\">\n                        <span id=\"chatUserName\" class=\"messages-chat-username\"><\/span>\n                        <span id=\"chatUserVerification\" class=\"messages-chat-verification\"><\/span>\n                    <\/div>\n                <\/div>\n                <button onclick=\"closeMessagesModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;margin-left:auto;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n            <\/div>\n\n            <!-- Messages Container -->\n            <div id=\"chatMessagesContainer\" class=\"messages-chat-container\">\n                <!-- Loading state -->\n                <div id=\"chatMessagesLoading\" class=\"messages-loading\">\n                    <div class=\"messages-spinner\"><\/div>\n                    <p>Loading messages...<\/p>\n                <\/div>\n\n                <!-- Messages list -->\n                <div id=\"chatMessagesList\" class=\"chat-messages-list\"><\/div>\n            <\/div>\n\n            <!-- Message Input -->\n            <div class=\"messages-input-container\">\n                <div class=\"messages-cost-indicator\">\n                                            <span>\u26a1 50 sparks per message<\/span>\n                        <span class=\"messages-balance-display\">\u2022 Your balance: <span id=\"messagesBalanceAmount\">0<\/span> \u26a1<\/span>\n                                    <\/div>\n                <div class=\"messages-input-row\">\n                    <label class=\"messages-photo-btn\" title=\"Send photo\">\n                        <input type=\"file\" id=\"messagePhotoInput\" accept=\"image\/*\" style=\"display:none;\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n                            <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/>\n                            <polyline points=\"21 15 16 10 5 21\"\/>\n                        <\/svg>\n                    <\/label>\n                    <input type=\"text\" id=\"messageTextInput\" class=\"messages-text-input\" placeholder=\"Type a message...\" maxlength=\"1000\">\n                    <button id=\"messageSendBtn\" class=\"messages-send-btn\" onclick=\"sendMessage()\" title=\"Send message\">\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    \/\/ Messages state\n    let currentConversationId = null;\n    let currentRecipientId = null;\n    let currentRecipientName = '';\n    let conversationsOffset = 0;\n    let messagesOffset = 0;\n    const conversationsLimit = 20;\n    const messagesLimit = 50;\n    let isLoadingConversations = false;\n    let isLoadingMessages = false;\n    let isSendingMessage = false;\n\n    \/\/ Helper to get nonce\n    function getMessagesNonce() {\n        return (typeof ANONCAM_DATA !== 'undefined' && ANONCAM_DATA.messages_nonce)\n            ? ANONCAM_DATA.messages_nonce\n            : '';\n    }\n\n    \/\/ Helper to get AJAX URL\n    function getAjaxUrl() {\n        return (typeof ANONCAM_DATA !== 'undefined' && ANONCAM_DATA.ajax_url)\n            ? ANONCAM_DATA.ajax_url\n            : '\/wp-admin\/admin-ajax.php';\n    }\n\n    \/\/ Make functions globally accessible\n    window.openMessagesModal = function(conversationId, recipientId) {\n        const modal = document.getElementById('messagesModal');\n        if (modal) {\n            modal.style.display = 'flex';\n            document.body.style.overflow = 'hidden';\n\n            \/\/ If specific conversation requested, open it directly\n            if (conversationId && recipientId) {\n                currentConversationId = conversationId;\n                currentRecipientId = recipientId;\n                showChatView();\n            } else {\n                \/\/ Show conversations list\n                showConversationsList();\n            }\n        }\n    };\n\n    window.closeMessagesModal = function() {\n        const modal = document.getElementById('messagesModal');\n        if (modal) {\n            modal.style.display = 'none';\n            document.body.style.overflow = '';\n        }\n    };\n\n    window.showConversationsList = function() {\n        document.getElementById('messagesListView').style.display = 'block';\n        document.getElementById('messagesChatView').style.display = 'none';\n\n        \/\/ Reset and load conversations\n        conversationsOffset = 0;\n        document.getElementById('conversationsList').innerHTML = '';\n        document.getElementById('conversationsListWrapper').style.display = 'none';\n        loadConversations();\n    };\n\n    function showChatView() {\n        document.getElementById('messagesListView').style.display = 'none';\n        document.getElementById('messagesChatView').style.display = 'flex';\n\n        \/\/ Reset messages\n        messagesOffset = 0;\n        document.getElementById('chatMessagesList').innerHTML = '';\n\n        loadMessages();\n        loadUserSparkBalance();\n    }\n\n    function loadConversations() {\n        if (isLoadingConversations) return;\n\n        isLoadingConversations = true;\n        const loadingEl = document.getElementById('conversationsLoading');\n        const emptyEl = document.getElementById('conversationsEmpty');\n        const listEl = document.getElementById('conversationsList');\n        const listWrapper = document.getElementById('conversationsListWrapper');\n\n        if (conversationsOffset === 0) {\n            loadingEl.style.display = 'block';\n            emptyEl.style.display = 'none';\n        }\n\n        const formData = new FormData();\n        formData.append('action', 'meetgle_get_conversations');\n        formData.append('nonce', getMessagesNonce());\n        formData.append('offset', conversationsOffset);\n        formData.append('limit', conversationsLimit);\n\n        fetch(getAjaxUrl(), {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            loadingEl.style.display = 'none';\n            isLoadingConversations = false;\n\n            if (data.success) {\n                const conversations = data.data.conversations;\n\n                \/\/ Update unread badge\n                updateMessagesBadge(data.data.total_unread);\n\n                if (conversations.length === 0 && conversationsOffset === 0) {\n                    emptyEl.style.display = 'block';\n                    listWrapper.style.display = 'none';\n                } else {\n                    emptyEl.style.display = 'none';\n                    listWrapper.style.display = 'block';\n\n                    conversations.forEach(conv => {\n                        listEl.appendChild(createConversationElement(conv));\n                    });\n\n                    conversationsOffset += conversations.length;\n                }\n            }\n        })\n        .catch(err => {\n            console.error('Failed to load conversations:', err);\n            loadingEl.style.display = 'none';\n            isLoadingConversations = false;\n        });\n    }\n\n    function createConversationElement(conv) {\n        const div = document.createElement('div');\n        div.className = 'conversation-item' + (conv.unread_count > 0 ? ' unread' : '');\n        div.dataset.id = conv.id;\n        div.dataset.userId = conv.other_user_id;\n        div.dataset.userName = conv.other_user_name;\n        div.dataset.userAvatar = conv.other_user_avatar;\n        div.dataset.verification = conv.other_user_verification || '';\n\n        \/\/ Build verification badge HTML\n        let verificationBadge = '';\n        if (conv.other_user_verification === 'gold') {\n            verificationBadge = '<span class=\"verification-badge gold\" title=\"' + (ANONCAM_DATA.lang.messages_premium_verified || 'Premium Verified') + '\" style=\"display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);border-radius:50%;font-size:9px;margin-left:4px;color:white;font-weight:bold;\">\u2713<\/span>';\n        } else if (conv.other_user_verification === 'blue') {\n            verificationBadge = '<span class=\"verification-badge blue\" title=\"' + (ANONCAM_DATA.lang.messages_verified || 'Verified') + '\" style=\"display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);border-radius:50%;font-size:9px;margin-left:4px;color:white;font-weight:bold;\">\u2713<\/span>';\n        }\n\n        div.innerHTML = `\n            <img decoding=\"async\" src=\"${escapeHtml(conv.other_user_avatar)}\" alt=\"Avatar\" class=\"conversation-avatar\">\n            <div class=\"conversation-content\">\n                <div class=\"conversation-header\">\n                    <span class=\"conversation-name\">${escapeHtml(conv.other_user_name)}${verificationBadge}<\/span>\n                    <span class=\"conversation-time\">${conv.time_ago}<\/span>\n                <\/div>\n                <div class=\"conversation-preview\">\n                    <span class=\"conversation-message\">${escapeHtml(conv.last_message || (ANONCAM_DATA.lang.messages_empty || 'No conversations yet'))}<\/span>\n                    ${conv.unread_count > 0 ? `<span class=\"conversation-unread\">${conv.unread_count}<\/span>` : ''}\n                <\/div>\n            <\/div>\n        `;\n\n        div.addEventListener('click', function() {\n            currentConversationId = conv.id;\n            currentRecipientId = conv.other_user_id;\n            currentRecipientName = conv.other_user_name;\n\n            \/\/ Update chat header\n            document.getElementById('chatUserAvatar').src = conv.other_user_avatar;\n            document.getElementById('chatUserName').textContent = conv.other_user_name;\n\n            const verificationEl = document.getElementById('chatUserVerification');\n            if (conv.other_user_verification === 'gold') {\n                verificationEl.innerHTML = '<span style=\"display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);border-radius:50%;font-size:10px;color:white;font-weight:bold;\">\u2713<\/span>';\n                verificationEl.title = (ANONCAM_DATA.lang.messages_premium_verified || 'Premium Verified');\n            } else if (conv.other_user_verification === 'blue') {\n                verificationEl.innerHTML = '<span style=\"display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);border-radius:50%;font-size:10px;color:white;font-weight:bold;\">\u2713<\/span>';\n                verificationEl.title = (ANONCAM_DATA.lang.messages_verified || 'Verified');\n            } else {\n                verificationEl.innerHTML = '';\n            }\n\n            showChatView();\n        });\n\n        return div;\n    }\n\n    function loadMessages() {\n        if (isLoadingMessages || !currentConversationId) return;\n\n        isLoadingMessages = true;\n        const loadingEl = document.getElementById('chatMessagesLoading');\n        const listEl = document.getElementById('chatMessagesList');\n\n        if (messagesOffset === 0) {\n            loadingEl.style.display = 'block';\n        }\n\n        const formData = new FormData();\n        formData.append('action', 'meetgle_get_messages');\n        formData.append('nonce', getMessagesNonce());\n        formData.append('conversation_id', currentConversationId);\n        formData.append('offset', messagesOffset);\n        formData.append('limit', messagesLimit);\n\n        fetch(getAjaxUrl(), {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            loadingEl.style.display = 'none';\n            isLoadingMessages = false;\n\n            if (data.success) {\n                const messages = data.data.messages;\n\n                \/\/ Update unread badge\n                updateMessagesBadge(data.data.total_unread);\n\n                messages.forEach(msg => {\n                    listEl.appendChild(createMessageElement(msg));\n                });\n\n                messagesOffset += messages.length;\n\n                \/\/ Scroll to bottom\n                scrollToBottom();\n            }\n        })\n        .catch(err => {\n            console.error('Failed to load messages:', err);\n            loadingEl.style.display = 'none';\n            isLoadingMessages = false;\n        });\n    }\n\n    function createMessageElement(msg) {\n        const div = document.createElement('div');\n        div.className = 'chat-message ' + (msg.is_own ? 'own' : 'other');\n        div.dataset.id = msg.id;\n\n        let contentHtml = '';\n        if (msg.type === 'photo') {\n            contentHtml = `<img decoding=\"async\" src=\"${escapeHtml(msg.content)}\" alt=\"Photo\" class=\"chat-message-photo\" onclick=\"openMessagePhoto('${escapeHtml(msg.content)}')\">`;\n        } else {\n            contentHtml = `<span class=\"chat-message-text\">${escapeHtml(msg.content)}<\/span>`;\n        }\n\n        div.innerHTML = `\n            <div class=\"chat-message-bubble\">\n                ${contentHtml}\n                <span class=\"chat-message-time\">${msg.time_ago}<\/span>\n            <\/div>\n        `;\n\n        return div;\n    }\n\n    window.sendMessage = function() {\n        if (isSendingMessage || !currentRecipientId) return;\n\n        const input = document.getElementById('messageTextInput');\n        const content = input.value.trim();\n\n        if (!content) return;\n\n        isSendingMessage = true;\n        const sendBtn = document.getElementById('messageSendBtn');\n        sendBtn.disabled = true;\n\n        const formData = new FormData();\n        formData.append('action', 'meetgle_send_message');\n        formData.append('nonce', getMessagesNonce());\n        formData.append('recipient_id', currentRecipientId);\n        formData.append('content', content);\n\n        fetch(getAjaxUrl(), {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            isSendingMessage = false;\n            sendBtn.disabled = false;\n\n            if (data.success) {\n                \/\/ Clear input\n                input.value = '';\n\n                \/\/ Add message to chat\n                const msg = {\n                    id: data.data.message_id,\n                    is_own: true,\n                    type: 'text',\n                    content: content,\n                    time_ago: (ANONCAM_DATA.lang.messages_just_now || 'Just now')\n                };\n                document.getElementById('chatMessagesList').appendChild(createMessageElement(msg));\n                scrollToBottom();\n\n                \/\/ Update spark balance\n                if (data.data.new_balance !== undefined) {\n                    updateSparkBalance(data.data.new_balance);\n                }\n\n                \/\/ Update conversation ID if it's a new conversation\n                if (data.data.conversation_id) {\n                    currentConversationId = data.data.conversation_id;\n                }\n            } else {\n                alert(data.data || (ANONCAM_DATA.lang.js_messages_send_failed || 'Failed to send message'));\n            }\n        })\n        .catch(err => {\n            console.error('Failed to send message:', err);\n            isSendingMessage = false;\n            sendBtn.disabled = false;\n            alert((ANONCAM_DATA.lang.js_messages_send_error || 'Failed to send message. Please try again.'));\n        });\n    };\n\n    \/\/ Handle photo upload\n    document.addEventListener('DOMContentLoaded', function() {\n        const photoInput = document.getElementById('messagePhotoInput');\n        if (photoInput) {\n            photoInput.addEventListener('change', function(e) {\n                if (!this.files || !this.files[0]) return;\n                if (!currentRecipientId) return;\n\n                const file = this.files[0];\n\n                \/\/ Validate file size\n                if (file.size > 5 * 1024 * 1024) {\n                    alert((ANONCAM_DATA.lang.js_messages_photo_too_large || 'Photo must be less than 5MB'));\n                    this.value = '';\n                    return;\n                }\n\n                sendPhotoMessage(file);\n                this.value = ''; \/\/ Reset input\n            });\n        }\n\n        \/\/ Handle Enter key in input\n        const textInput = document.getElementById('messageTextInput');\n        if (textInput) {\n            textInput.addEventListener('keypress', function(e) {\n                if (e.key === 'Enter' && !e.shiftKey) {\n                    e.preventDefault();\n                    sendMessage();\n                }\n            });\n        }\n    });\n\n    function sendPhotoMessage(file) {\n        if (isSendingMessage || !currentRecipientId) return;\n\n        isSendingMessage = true;\n        const sendBtn = document.getElementById('messageSendBtn');\n        sendBtn.disabled = true;\n\n        const formData = new FormData();\n        formData.append('action', 'meetgle_send_photo_message');\n        formData.append('nonce', getMessagesNonce());\n        formData.append('recipient_id', currentRecipientId);\n        formData.append('photo', file);\n\n        fetch(getAjaxUrl(), {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            isSendingMessage = false;\n            sendBtn.disabled = false;\n\n            if (data.success) {\n                \/\/ Add photo message to chat\n                const msg = {\n                    id: data.data.message_id,\n                    is_own: true,\n                    type: 'photo',\n                    content: data.data.photo_url,\n                    time_ago: (ANONCAM_DATA.lang.messages_just_now || 'Just now')\n                };\n                document.getElementById('chatMessagesList').appendChild(createMessageElement(msg));\n                scrollToBottom();\n\n                \/\/ Update spark balance\n                if (data.data.new_balance !== undefined) {\n                    updateSparkBalance(data.data.new_balance);\n                }\n\n                \/\/ Update conversation ID if new\n                if (data.data.conversation_id) {\n                    currentConversationId = data.data.conversation_id;\n                }\n            } else {\n                alert(data.data || (ANONCAM_DATA.lang.js_messages_photo_failed || 'Failed to send photo'));\n            }\n        })\n        .catch(err => {\n            console.error('Failed to send photo:', err);\n            isSendingMessage = false;\n            sendBtn.disabled = false;\n            alert((ANONCAM_DATA.lang.js_messages_photo_error || 'Failed to send photo. Please try again.'));\n        });\n    }\n\n    window.openMessagePhoto = function(url) {\n        \/\/ Create lightbox overlay\n        let lightbox = document.getElementById('messagePhotoLightbox');\n        if (!lightbox) {\n            lightbox = document.createElement('div');\n            lightbox.id = 'messagePhotoLightbox';\n            lightbox.style.cssText = `\n                position: fixed;\n                top: 0;\n                left: 0;\n                right: 0;\n                bottom: 0;\n                background: rgba(0, 0, 0, 0.9);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                z-index: 100002;\n                cursor: pointer;\n            `;\n            lightbox.onclick = function() {\n                lightbox.style.display = 'none';\n            };\n\n            const img = document.createElement('img');\n            img.id = 'messagePhotoLightboxImage';\n            img.style.cssText = `\n                max-width: 90vw;\n                max-height: 90vh;\n                object-fit: contain;\n                border-radius: 8px;\n                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n            `;\n            img.onclick = function(e) {\n                e.stopPropagation();\n            };\n\n            const closeBtn = document.createElement('button');\n            closeBtn.innerHTML = '\u00d7';\n            closeBtn.style.cssText = `\n                position: absolute;\n                top: 20px;\n                right: 20px;\n                background: rgba(255, 255, 255, 0.2);\n                border: none;\n                color: white;\n                font-size: 32px;\n                width: 44px;\n                height: 44px;\n                border-radius: 50%;\n                cursor: pointer;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                line-height: 1;\n            `;\n            closeBtn.onclick = function() {\n                lightbox.style.display = 'none';\n            };\n\n            lightbox.appendChild(img);\n            lightbox.appendChild(closeBtn);\n            document.body.appendChild(lightbox);\n        }\n\n        \/\/ Set image and show lightbox\n        document.getElementById('messagePhotoLightboxImage').src = url;\n        lightbox.style.display = 'flex';\n    };\n\n    window.openChatUserProfile = function() {\n        if (currentRecipientId && typeof openMeetgleProfileModal === 'function') {\n            closeMessagesModal();\n            \/\/ Get username from data\n            const userEl = document.getElementById('chatUserName');\n            if (userEl) {\n                \/\/ We'll need to pass the user ID to profile modal\n                openMeetgleProfileModal(userEl.textContent);\n            }\n        }\n    };\n\n    \/\/ Start conversation from profile (global function)\n    window.startConversationWith = function(userId, username) {\n        if (!userId && !username) return;\n\n        const formData = new FormData();\n        formData.append('action', 'meetgle_start_conversation');\n        formData.append('nonce', getMessagesNonce());\n        if (userId) formData.append('user_id', userId);\n        if (username) formData.append('username', username);\n\n        fetch(getAjaxUrl(), {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            if (data.success) {\n                currentConversationId = data.data.conversation_id;\n                currentRecipientId = data.data.other_user_id;\n                currentRecipientName = data.data.other_user_name;\n\n                \/\/ Update chat header\n                document.getElementById('chatUserAvatar').src = data.data.other_user_avatar;\n                document.getElementById('chatUserName').textContent = data.data.other_user_name;\n                document.getElementById('chatUserVerification').innerHTML = '';\n\n                \/\/ Open modal and show chat\n                openMessagesModal();\n                setTimeout(() => {\n                    showChatView();\n                }, 100);\n            } else {\n                alert(data.data || (ANONCAM_DATA.lang.js_messages_conv_failed || 'Failed to start conversation'));\n            }\n        })\n        .catch(err => {\n            console.error('Failed to start conversation:', err);\n        });\n    };\n\n    function scrollToBottom() {\n        const container = document.getElementById('chatMessagesContainer');\n        if (container) {\n            container.scrollTop = container.scrollHeight;\n        }\n    }\n\n    function updateMessagesBadge(count) {\n        \/\/ Update header badge\n        const headerBadge = document.getElementById('messagesUnreadBadgeHeader');\n        if (headerBadge) {\n            headerBadge.textContent = count;\n            headerBadge.style.display = count > 0 ? 'inline-flex' : 'none';\n        }\n\n        \/\/ Update envelope button badge\n        const envelopeBadge = document.getElementById('messagesEnvelopeBadge');\n        if (envelopeBadge) {\n            envelopeBadge.textContent = count > 99 ? '99+' : count;\n            envelopeBadge.style.display = count > 0 ? 'flex' : 'none';\n        }\n    }\n\n    function updateSparkBalance(newBalance) {\n        \/\/ Update main spark balance\n        const balanceEl = document.getElementById('sparkBalanceAmount');\n        if (balanceEl) {\n            balanceEl.textContent = newBalance.toLocaleString();\n        }\n        \/\/ Update messages modal balance display\n        const messagesBalanceEl = document.getElementById('messagesBalanceAmount');\n        if (messagesBalanceEl) {\n            messagesBalanceEl.textContent = newBalance.toLocaleString();\n        }\n    }\n\n    \/\/ Load user's spark balance when opening chat\n    function loadUserSparkBalance() {\n        const formData = new FormData();\n        formData.append('action', 'meetgle_get_spark_balance');\n\n        fetch(getAjaxUrl(), {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            if (data.success) {\n                const balance = data.data.balance || 0;\n                const messagesBalanceEl = document.getElementById('messagesBalanceAmount');\n                if (messagesBalanceEl) {\n                    messagesBalanceEl.textContent = parseInt(balance).toLocaleString();\n                }\n            }\n        });\n    }\n\n    function escapeHtml(text) {\n        if (!text) return '';\n        const div = document.createElement('div');\n        div.textContent = text;\n        return div.innerHTML;\n    }\n\n    \/\/ Global function to refresh unread count\n    window.refreshMessagesCount = function() {\n        const formData = new FormData();\n        formData.append('action', 'meetgle_get_unread_messages_count');\n        formData.append('nonce', getMessagesNonce());\n\n        fetch(getAjaxUrl(), {\n            method: 'POST',\n            body: formData\n        })\n        .then(res => res.json())\n        .then(data => {\n            if (data.success) {\n                updateMessagesBadge(data.data.unread_count);\n            }\n        });\n    };\n\n    \/\/ Close on backdrop click\n    document.getElementById('messagesModal').addEventListener('click', function(e) {\n        if (e.target === this) {\n            closeMessagesModal();\n        }\n    });\n\n    \/\/ Close on Escape key\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape') {\n            const modal = document.getElementById('messagesModal');\n            if (modal && modal.style.display !== 'none') {\n                closeMessagesModal();\n            }\n        }\n    });\n\n    \/\/ Poll for new messages every 30 seconds\n    setInterval(function() {\n        if (!document.hidden && typeof ANONCAM_DATA !== 'undefined' && ANONCAM_DATA.isUserLoggedIn) {\n            refreshMessagesCount();\n        }\n    }, 30000);\n})();\n<\/script>\n        \n        <!-- Streak Modal -->\n                \n        \n        <!-- Login & Register Modals (for non-logged-in users) -->\n                \n<!-- Login Modal -->\n<div id=\"meetgleLoginModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content login-modal-content\" style=\"max-width:480px;margin:0;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 20px 0 20px;display:flex;align-items:center;justify-content:space-between;\">\n            <h2 style=\"color:white;margin:0;font-size:20px;font-weight:700;\">Log In<\/h2>\n            <button onclick=\"closeMeetgleLoginModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n        <\/div>\n\n        <!-- Content -->\n        <div class=\"login-modal-scroll\" style=\"padding:20px;overflow-y:auto;max-height:calc(80vh - 80px);\">\n            <div class=\"meetgle-login-form-wrap\">\n                \n<div class=\"um um-login um-2976\">\n\t<div class=\"um-form\">\n\t\t<form method=\"post\" action=\"\" autocomplete=\"off\">\n\t\t\t<div class=\"um-row _um_row_1 \" style=\"margin: 0 0 30px 0;\"><div class=\"um-col-1\"><div  id=\"um_field_2976_username\" class=\"um-field um-field-text  um-field-username um-field-text um-field-type_text\" data-key=\"username\"><div class=\"um-field-label\"><label for=\"username-2976\">Nombre de usuario o correo electr\u00f3nico:<span class=\"um-req\" title=\"Obligatorio\">*<\/span><\/label><div class=\"um-clear\"><\/div><\/div><div class=\"um-field-area\"><input  autocomplete=\"off\" class=\"um-form-field valid \" type=\"text\" name=\"username-2976\" id=\"username-2976\" value=\"\" placeholder=\"\" data-validate=\"unique_username_or_email\" data-key=\"username\"  aria-invalid=\"false\" \/>\n\n\t\t\t\t\t\t<\/div><\/div><div  id=\"um_field_2976_user_password\" class=\"um-field um-field-password  um-field-user_password um-field-password um-field-type_password\" data-key=\"user_password\"><div class=\"um-field-label\"><label for=\"user_password-2976\">Contrase\u00f1a<span class=\"um-req\" title=\"Obligatorio\">*<\/span><\/label><div class=\"um-clear\"><\/div><\/div><div class=\"um-field-area\"><div class=\"um-field-area-password\">\n\t\t\t\t\t\t\t\t\t<input class=\"um-form-field valid \" type=\"password\" name=\"user_password-2976\" id=\"user_password-2976\" value=\"\" placeholder=\"\" data-validate=\"\" data-key=\"user_password\"  aria-invalid=\"false\" \/>\n\t\t\t\t\t\t\t\t\t<span class=\"um-toggle-password\"><i class=\"um-icon-eye\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div><\/div><\/div><\/div>\t<input type=\"hidden\" name=\"form_id\" id=\"form_id_2976\" value=\"2976\" \/>\n\t\t<p class=\"um_request_name\">\n\t\t<label for=\"um_request_2976\">Only fill in if you are not human<\/label>\n\t\t<input type=\"hidden\" name=\"um_request\" id=\"um_request_2976\" class=\"input\" value=\"\" size=\"25\" autocomplete=\"off\" \/>\n\t<\/p>\n\t<input type=\"hidden\" name=\"redirect_to\" id=\"redirect_to\" value=\"\/video-chat\" \/><input type=\"hidden\" id=\"_wpnonce\" name=\"_wpnonce\" value=\"3275fe5184\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/es\/wp-json\/wp\/v2\/pages\/2900\" \/>\n\t<div class=\"um-col-alt\">\n\n\t\t\n\t\t\t<div class=\"um-center\">\n\t\t\t\t<input type=\"submit\" value=\"Acceder\" class=\"um-button\" id=\"um-submit-btn\" \/>\n\t\t\t<\/div>\n\n\t\t\n\t\t<div class=\"um-clear\"><\/div>\n\n\t<\/div>\n\n\t\n\t<div class=\"um-col-alt-b\">\n\t\t<a href=\"https:\/\/chatimeet.com\/es\/password-reset\/\" class=\"um-link-alt\">\n\t\t\t\u00bfHas olvidado tu contrase\u00f1a?\t\t<\/a>\n\t<\/div>\n\n\t\t\t<\/form>\n\t<\/div>\n<\/div>\n<style>\n\t\t\t.um-2976.um {\n\t\t\tmax-width: 500px;\n\t\t}\n\t\t<\/style>\n            <\/div>\n\n                        <!-- Register link -->\n            <div style=\"text-align:center;padding:16px 0 4px;border-top:1px solid rgba(255,255,255,0.06);margin-top:16px;\">\n                <span style=\"color:rgba(255,255,255,0.4);font-size:13px;\">Don&#039;t have an account?<\/span>\n                <a href=\"#\" onclick=\"openMeetgleRegisterModal();return false;\" style=\"color:#F59E0B;font-size:13px;font-weight:600;text-decoration:none;margin-left:4px;\">Create one<\/a>\n            <\/div>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<style>\n.login-modal-content {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.login-modal-content::-webkit-scrollbar { display: none; }\n.login-modal-scroll {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.login-modal-scroll::-webkit-scrollbar { display: none; }\n\n\/* Override UM form styles for dark modal *\/\n.meetgle-login-form-wrap .um-form,\n.meetgle-login-form-wrap .um {\n    background: transparent !important;\n    border: none !important;\n    box-shadow: none !important;\n    padding: 0 !important;\n    margin: 0 !important;\n}\n.meetgle-login-form-wrap .um-form label,\n.meetgle-login-form-wrap .um label {\n    color: rgba(255,255,255,0.7) !important;\n}\n.meetgle-login-form-wrap .um-form input[type=\"text\"],\n.meetgle-login-form-wrap .um-form input[type=\"password\"],\n.meetgle-login-form-wrap .um-form input[type=\"email\"],\n.meetgle-login-form-wrap .um input[type=\"text\"],\n.meetgle-login-form-wrap .um input[type=\"password\"],\n.meetgle-login-form-wrap .um input[type=\"email\"] {\n    background: rgba(255,255,255,0.06) !important;\n    border: 1px solid rgba(255,255,255,0.12) !important;\n    color: white !important;\n    border-radius: 10px !important;\n    padding: 12px 14px !important;\n}\n.meetgle-login-form-wrap .um-form input::placeholder,\n.meetgle-login-form-wrap .um input::placeholder {\n    color: rgba(255,255,255,0.3) !important;\n}\n.meetgle-login-form-wrap .um-form input[type=\"submit\"],\n.meetgle-login-form-wrap .um input[type=\"submit\"],\n.meetgle-login-form-wrap .um-form .um-button,\n.meetgle-login-form-wrap .um .um-button {\n    background: #F59E0B !important;\n    color: #000 !important;\n    border: none !important;\n    border-radius: 12px !important;\n    font-weight: 700 !important;\n    padding: 12px 24px !important;\n    cursor: pointer !important;\n    transition: background 0.2s !important;\n}\n.meetgle-login-form-wrap .um-form input[type=\"submit\"]:hover,\n.meetgle-login-form-wrap .um input[type=\"submit\"]:hover,\n.meetgle-login-form-wrap .um-form .um-button:hover,\n.meetgle-login-form-wrap .um .um-button:hover {\n    background: #D97706 !important;\n}\n.meetgle-login-form-wrap .um-form a,\n.meetgle-login-form-wrap .um a {\n    color: #F59E0B !important;\n}\n.meetgle-login-form-wrap .um-form .um-field-error,\n.meetgle-login-form-wrap .um .um-field-error {\n    color: #EF4444 !important;\n}\n\/* Hide UM header\/title since we have our own *\/\n.meetgle-login-form-wrap .um-form .um-header,\n.meetgle-login-form-wrap .um .um-header {\n    display: none !important;\n}\n\n\/* Mobile fullscreen *\/\n@media (max-width: 900px) {\n    #meetgleLoginModal {\n        padding: 0 !important;\n    }\n    #meetgleLoginModal .login-modal-content {\n        max-width: 100vw !important;\n        width: 100vw !important;\n        height: 100vh !important;\n        height: 100svh !important;\n        max-height: 100vh !important;\n        max-height: 100svh !important;\n        border-radius: 0 !important;\n        border: none !important;\n    }\n    .login-modal-scroll {\n        max-height: calc(100svh - 80px) !important;\n    }\n}\n<\/style>\n\n<script>\n(function() {\n    var loginModalOpen = false;\n\n    window.openMeetgleLoginModal = function() {\n        \/\/ Close register modal if open\n        if (typeof closeMeetgleRegisterModal === 'function') closeMeetgleRegisterModal();\n\n        var modal = document.getElementById('meetgleLoginModal');\n        if (modal) {\n            modal.style.display = 'flex';\n            document.body.style.overflow = 'hidden';\n            loginModalOpen = true;\n        }\n    };\n\n    window.closeMeetgleLoginModal = function() {\n        var modal = document.getElementById('meetgleLoginModal');\n        if (modal) {\n            modal.style.display = 'none';\n            document.body.style.overflow = '';\n            loginModalOpen = false;\n        }\n    };\n\n    \/\/ Keep modal open after UM AJAX form submission\n    var loginModal = document.getElementById('meetgleLoginModal');\n    if (loginModal) {\n        var observer = new MutationObserver(function() {\n            if (loginModalOpen && loginModal.style.display !== 'flex') {\n                loginModal.style.display = 'flex';\n                document.body.style.overflow = 'hidden';\n            }\n        });\n        observer.observe(loginModal, { attributes: true, attributeFilter: ['style'] });\n    }\n\n    \/\/ Intercept UM's jQuery AJAX complete to re-ensure modal stays open\n    if (typeof jQuery !== 'undefined') {\n        jQuery(document).ajaxComplete(function(event, xhr, settings) {\n            if (!loginModalOpen) return;\n            if (settings && settings.data && typeof settings.data === 'string' && settings.data.indexOf('um_') !== -1) {\n                setTimeout(function() {\n                    if (loginModalOpen) {\n                        var modal = document.getElementById('meetgleLoginModal');\n                        if (modal) {\n                            modal.style.display = 'flex';\n                            document.body.style.overflow = 'hidden';\n                        }\n                    }\n                }, 100);\n            }\n        });\n    }\n\n    \/\/ Close on backdrop click\n    loginModal.addEventListener('click', function(e) {\n        if (!e.target.closest('.login-modal-content')) {\n            closeMeetgleLoginModal();\n        }\n    });\n\n    \/\/ Escape key\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape') {\n            if (loginModalOpen) {\n                closeMeetgleLoginModal();\n            }\n        }\n    });\n\n    \/\/ Auto-open login modal from URL params\n    var params = new URLSearchParams(window.location.search);\n    if (params.has('message') || params.has('um_form_id') || params.get('login') === 'open') {\n        openMeetgleLoginModal();\n        \/\/ Clean URL without reload\n        if (window.history.replaceState) {\n            window.history.replaceState({}, '', window.location.pathname);\n        }\n    }\n})();\n<\/script>\n        \n<!-- Register Modal -->\n<div id=\"meetgleRegisterModal\" class=\"meetgle-modal\" style=\"display:none;\">\n    <div class=\"meetgle-modal-content register-modal-content\" style=\"max-width:480px;margin:0;background:rgba(20,20,30,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;\">\n\n        <!-- Header -->\n        <div style=\"padding:20px 20px 0 20px;display:flex;align-items:center;justify-content:space-between;\">\n            <h2 style=\"color:white;margin:0;font-size:20px;font-weight:700;\">Create Account<\/h2>\n            <button onclick=\"closeMeetgleRegisterModal()\" style=\"background:rgba(255,255,255,0.1);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s;\" onmouseover=\"this.style.background='rgba(255,255,255,0.2)'\" onmouseout=\"this.style.background='rgba(255,255,255,0.1)'\">&times;<\/button>\n        <\/div>\n\n        <!-- Content -->\n        <div class=\"register-modal-scroll\" style=\"padding:20px;overflow-y:auto;max-height:calc(80vh - 80px);\">\n            <div class=\"meetgle-register-form-wrap\">\n                \n<div class=\"um um-register um-2975\">\n\t<div class=\"um-form\" data-mode=\"register\">\n\t\t<form method=\"post\" action=\"\">\n\t\t\t<div class=\"um-row _um_row_1 \" style=\"margin: 0 0 30px 0;\"><div class=\"um-col-1\"><div  id=\"um_field_2975_user_login\" class=\"um-field um-field-text  um-field-user_login um-field-text um-field-type_text\" data-key=\"user_login\"><div class=\"um-field-label\"><label for=\"user_login-2975\">Nombre de usuario<span class=\"um-req\" title=\"Obligatorio\">*<\/span><\/label><div class=\"um-clear\"><\/div><\/div><div class=\"um-field-area\"><input  autocomplete=\"off\" class=\"um-form-field valid \" type=\"text\" name=\"user_login-2975\" id=\"user_login-2975\" value=\"\" placeholder=\"\" data-validate=\"unique_username\" data-key=\"user_login\"  aria-invalid=\"false\" \/>\n\n\t\t\t\t\t\t<\/div><\/div><div  id=\"um_field_2975_user_email\" class=\"um-field um-field-text  um-field-user_email um-field-text um-field-type_text\" data-key=\"user_email\"><div class=\"um-field-label\"><label for=\"user_email-2975\">Direcci\u00f3n de correo electr\u00f3nico<span class=\"um-req\" title=\"Obligatorio\">*<\/span><\/label><div class=\"um-clear\"><\/div><\/div><div class=\"um-field-area\"><input  autocomplete=\"off\" class=\"um-form-field valid \" type=\"text\" name=\"user_email-2975\" id=\"user_email-2975\" value=\"\" placeholder=\"\" data-validate=\"unique_email\" data-key=\"user_email\"  aria-invalid=\"false\" \/>\n\n\t\t\t\t\t\t<\/div><\/div><div  id=\"um_field_2975_user_password\" class=\"um-field um-field-password  um-field-user_password um-field-password um-field-type_password\" data-key=\"user_password\"><div class=\"um-field-label\"><label for=\"user_password-2975\">Contrase\u00f1a<span class=\"um-req\" title=\"Obligatorio\">*<\/span><\/label><div class=\"um-clear\"><\/div><\/div><div class=\"um-field-area\"><div class=\"um-field-area-password\">\n\t\t\t\t\t\t\t\t\t<input class=\"um-form-field valid \" type=\"password\" name=\"user_password-2975\" id=\"user_password-2975\" value=\"\" placeholder=\"\" data-validate=\"\" data-key=\"user_password\"  aria-invalid=\"false\" \/>\n\t\t\t\t\t\t\t\t\t<span class=\"um-toggle-password\"><i class=\"um-icon-eye\"><\/i><\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div><\/div><div  id=\"um_field_2975_confirm_user_password\" class=\"um-field um-field-password  um-field-user_password um-field-password um-field-type_password\" data-key=\"confirm_user_password\"><div class=\"um-field-label\"><label for=\"confirm_user_password-2975\">Confirmar Contrase\u00f1a<span class=\"um-req\" title=\"Obligatorio\">*<\/span><\/label><div class=\"um-clear\"><\/div><\/div><div class=\"um-field-area\"><div class=\"um-field-area-password\"><input class=\"um-form-field valid \" type=\"password\" name=\"confirm_user_password-2975\" id=\"confirm_user_password-2975\" value=\"\" placeholder=\"Confirmar Contrase\u00f1a\" data-validate=\"\" data-key=\"confirm_user_password\"  aria-invalid=\"false\" \/><span class=\"um-toggle-password\"><i class=\"um-icon-eye\"><\/i><\/span><\/div><\/div><\/div><div  id=\"um_field_2975_consent\" class=\"um-field um-field-checkbox  um-field-consent um-field-checkbox um-field-type_checkbox\" data-key=\"consent\"  aria-invalid=\"false\" ><div class=\"um-field-area\"><label class=\"um-field-checkbox  um-field-half \"><input   type=\"checkbox\" name=\"consent[]\" value=\"I confirm and acknowledge that I am at least 18 years old and legally permitted to use this platform. You agree to abide by our Terms of Service, Privacy Policy, and Rules.\"  \/><span class=\"um-field-checkbox-state\"><i class=\"um-icon-android-checkbox-outline-blank\"><\/i><\/span><span class=\"um-field-checkbox-option\">I confirm and acknowledge that I am at least 18 years old and legally permitted to use this platform. You agree to abide by our Terms of Service, Privacy Policy, and Rules.<\/span><\/label><div class=\"um-clear\"><\/div><\/div><\/div><\/div><\/div>\t<input type=\"hidden\" name=\"form_id\" id=\"form_id_2975\" value=\"2975\" \/>\n\t\t<p class=\"um_request_name\">\n\t\t<label for=\"um_request_2975\">Only fill in if you are not human<\/label>\n\t\t<input type=\"hidden\" name=\"um_request\" id=\"um_request_2975\" class=\"input\" value=\"\" size=\"25\" autocomplete=\"off\" \/>\n\t<\/p>\n\t<input type=\"hidden\" id=\"_wpnonce\" name=\"_wpnonce\" value=\"248f774419\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/es\/wp-json\/wp\/v2\/pages\/2900\" \/>\n\t<div class=\"um-col-alt\">\n\n\t\t\n\t\t\t<div class=\"um-center\">\n\t\t\t\t<input type=\"submit\" value=\"Registro\" class=\"um-button\" id=\"um-submit-btn\" \/>\n\t\t\t<\/div>\n\n\t\t\n\t\t<div class=\"um-clear\"><\/div>\n\n\t<\/div>\n\n\t\t\t<\/form>\n\t<\/div>\n<\/div>\n            <\/div>\n\n                        <!-- Login link -->\n            <div style=\"text-align:center;padding:16px 0 4px;border-top:1px solid rgba(255,255,255,0.06);margin-top:16px;\">\n                <span style=\"color:rgba(255,255,255,0.4);font-size:13px;\">Already have an account?<\/span>\n                <a href=\"#\" onclick=\"openMeetgleLoginModal();return false;\" style=\"color:#F59E0B;font-size:13px;font-weight:600;text-decoration:none;margin-left:4px;\">Log in<\/a>\n            <\/div>\n                    <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Hide scrollbar *\/\n.register-modal-content {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.register-modal-content::-webkit-scrollbar { display: none; }\n.register-modal-scroll {\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n}\n.register-modal-scroll::-webkit-scrollbar { display: none; }\n\n\/* Override UM form styles for dark modal *\/\n.meetgle-register-form-wrap .um-form,\n.meetgle-register-form-wrap .um {\n    background: transparent !important;\n    border: none !important;\n    box-shadow: none !important;\n    padding: 0 !important;\n    margin: 0 !important;\n}\n.meetgle-register-form-wrap .um-form label,\n.meetgle-register-form-wrap .um label {\n    color: rgba(255,255,255,0.7) !important;\n}\n.meetgle-register-form-wrap .um-form input[type=\"text\"],\n.meetgle-register-form-wrap .um-form input[type=\"password\"],\n.meetgle-register-form-wrap .um-form input[type=\"email\"],\n.meetgle-register-form-wrap .um input[type=\"text\"],\n.meetgle-register-form-wrap .um input[type=\"password\"],\n.meetgle-register-form-wrap .um input[type=\"email\"] {\n    background: rgba(255,255,255,0.06) !important;\n    border: 1px solid rgba(255,255,255,0.12) !important;\n    color: white !important;\n    border-radius: 10px !important;\n    padding: 12px 14px !important;\n}\n.meetgle-register-form-wrap .um-form input::placeholder,\n.meetgle-register-form-wrap .um input::placeholder {\n    color: rgba(255,255,255,0.3) !important;\n}\n.meetgle-register-form-wrap .um-form input[type=\"submit\"],\n.meetgle-register-form-wrap .um input[type=\"submit\"],\n.meetgle-register-form-wrap .um-form .um-button,\n.meetgle-register-form-wrap .um .um-button {\n    background: #F59E0B !important;\n    color: #000 !important;\n    border: none !important;\n    border-radius: 12px !important;\n    font-weight: 700 !important;\n    padding: 12px 24px !important;\n    cursor: pointer !important;\n    transition: background 0.2s !important;\n}\n.meetgle-register-form-wrap .um-form input[type=\"submit\"]:hover,\n.meetgle-register-form-wrap .um input[type=\"submit\"]:hover,\n.meetgle-register-form-wrap .um-form .um-button:hover,\n.meetgle-register-form-wrap .um .um-button:hover {\n    background: #D97706 !important;\n}\n.meetgle-register-form-wrap .um-form a,\n.meetgle-register-form-wrap .um a {\n    color: #F59E0B !important;\n}\n.meetgle-register-form-wrap .um-form .um-field-error,\n.meetgle-register-form-wrap .um .um-field-error {\n    color: #EF4444 !important;\n}\n\/* Hide UM header\/title since we have our own *\/\n.meetgle-register-form-wrap .um-form .um-header,\n.meetgle-register-form-wrap .um .um-header {\n    display: none !important;\n}\n\n\/* Mobile fullscreen *\/\n@media (max-width: 900px) {\n    #meetgleRegisterModal {\n        padding: 0 !important;\n    }\n    #meetgleRegisterModal .register-modal-content {\n        max-width: 100vw !important;\n        width: 100vw !important;\n        height: 100vh !important;\n        height: 100svh !important;\n        max-height: 100vh !important;\n        max-height: 100svh !important;\n        border-radius: 0 !important;\n        border: none !important;\n    }\n    .register-modal-scroll {\n        max-height: calc(100svh - 80px) !important;\n    }\n}\n<\/style>\n\n<script>\n(function() {\n    var registerModalOpen = false;\n\n    window.openMeetgleRegisterModal = function() {\n        \/\/ Close login modal if open\n        closeMeetgleLoginModal();\n\n        var modal = document.getElementById('meetgleRegisterModal');\n        if (modal) {\n            modal.style.display = 'flex';\n            document.body.style.overflow = 'hidden';\n            registerModalOpen = true;\n        }\n    };\n\n    window.closeMeetgleRegisterModal = function() {\n        var modal = document.getElementById('meetgleRegisterModal');\n        if (modal) {\n            modal.style.display = 'none';\n            document.body.style.overflow = '';\n            registerModalOpen = false;\n        }\n    };\n\n    \/\/ Keep modal open after UM AJAX form submission\n    \/\/ UM's JS may hide\/reset things after form validation \u2014 we re-force visibility\n    var registerModal = document.getElementById('meetgleRegisterModal');\n    if (registerModal) {\n        var observer = new MutationObserver(function() {\n            if (registerModalOpen && registerModal.style.display !== 'flex') {\n                registerModal.style.display = 'flex';\n                document.body.style.overflow = 'hidden';\n            }\n        });\n        observer.observe(registerModal, { attributes: true, attributeFilter: ['style'] });\n    }\n\n    \/\/ Also intercept UM's jQuery AJAX complete to re-ensure modal stays open\n    if (typeof jQuery !== 'undefined') {\n        jQuery(document).ajaxComplete(function(event, xhr, settings) {\n            if (!registerModalOpen) return;\n            \/\/ Check if this was a UM form submission\n            if (settings && settings.data && typeof settings.data === 'string' && settings.data.indexOf('um_') !== -1) {\n                setTimeout(function() {\n                    if (registerModalOpen) {\n                        var modal = document.getElementById('meetgleRegisterModal');\n                        if (modal) {\n                            modal.style.display = 'flex';\n                            document.body.style.overflow = 'hidden';\n                        }\n                    }\n                }, 100);\n            }\n        });\n    }\n\n    \/\/ Close on backdrop click\n    registerModal.addEventListener('click', function(e) {\n        if (!e.target.closest('.register-modal-content')) {\n            closeMeetgleRegisterModal();\n        }\n    });\n\n    \/\/ Escape key\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape') {\n            if (registerModalOpen) {\n                closeMeetgleRegisterModal();\n            }\n        }\n    });\n\n    \/\/ =========================================================================\n    \/\/ REAL-TIME EMAIL DOMAIN VALIDATION\n    \/\/ =========================================================================\n    var allowedDomains = [\"googlemail.com\",\"gmail.com\",\"yahoo.com\",\"yahoo.co.uk\",\"hotmail.com\",\"hotmail.co.uk\",\"live.com\",\"live.co.uk\",\"msn.com\",\"icloud.com\",\"me.com\",\"mac.com\",\"aol.com\",\"zoho.com\",\"fastmail.com\",\"mweb.co.za\",\"telkomsa.net\",\"vodamail.co.za\",\"webmail.co.za\",\"lantic.net\",\"iafrica.com\",\"ziggo.nl\",\"kpnmail.nl\",\"hetnet.nl\",\"planet.nl\",\"btinternet.com\",\"virginmedia.com\",\"sky.com\",\"orange.fr\",\"wanadoo.fr\",\"t-online.de\",\"web.de\",\"bluewin.ch\",\"outlook.com\",\"outlook.co.uk\",\"office365.com\",\"hotmail.fr\",\"hotmail.de\",\"live.nl\",\"icloud.co.uk\",\"gmx.com\",\"gmx.de\",\"gmx.net\",\"mail.com\",\"laposte.net\",\"free.fr\",\"sfr.fr\"];\n    var blockDotted = true;\n\n    function initEmailValidation() {\n        var wrap = document.querySelector('.meetgle-register-form-wrap');\n        if (!wrap) return;\n\n        \/\/ Find the UM email input \u2014 try multiple selectors\n        var emailInput = wrap.querySelector('input[data-key=\"user_email\"]')\n            || wrap.querySelector('input[name=\"user_email\"]')\n            || wrap.querySelector('input[type=\"email\"]');\n        if (!emailInput) return;\n\n        \/\/ Find the submit button\n        var submitBtn = wrap.querySelector('input[type=\"submit\"]')\n            || wrap.querySelector('.um-button');\n\n        \/\/ Create error message element\n        var errorEl = document.createElement('div');\n        errorEl.className = 'meetgle-email-error';\n        errorEl.style.cssText = 'display:none;color:#EF4444;font-size:12px;margin-top:6px;padding:8px 12px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2);border-radius:8px;line-height:1.5;';\n        emailInput.parentNode.insertBefore(errorEl, emailInput.nextSibling);\n\n        var lastValue = '';\n\n        function validateEmail() {\n            var email = emailInput.value.trim().toLowerCase();\n            if (email === lastValue) return;\n            lastValue = email;\n\n            \/\/ Reset state\n            errorEl.style.display = 'none';\n            emailInput.style.borderColor = 'rgba(255,255,255,0.12)';\n            if (submitBtn) submitBtn.disabled = false;\n\n            if (!email || email.indexOf('@') === -1) return;\n\n            var parts = email.split('@');\n            var local = parts[0];\n            var domain = parts[1];\n            if (!local || !domain) return;\n\n            \/\/ Check dots\/plus in local part\n            if (blockDotted && (local.indexOf('.') !== -1 || local.indexOf('+') !== -1)) {\n                showError('Please use a standard email address (no dots or + symbols allowed in the username part).');\n                return;\n            }\n\n            \/\/ Check allowed domains\n            if (allowedDomains.length > 0 && allowedDomains.indexOf(domain) === -1) {\n                showError('This email provider is not allowed. Please use a major email provider like Gmail, Yahoo, or Hotmail.');\n                return;\n            }\n        }\n\n        function showError(msg) {\n            errorEl.textContent = msg;\n            errorEl.style.display = 'block';\n            emailInput.style.borderColor = '#EF4444 !important';\n            if (submitBtn) submitBtn.disabled = true;\n        }\n\n        emailInput.addEventListener('input', validateEmail);\n        emailInput.addEventListener('blur', validateEmail);\n        emailInput.addEventListener('change', validateEmail);\n\n        \/\/ Also intercept form submit as a safety net\n        var form = wrap.querySelector('form');\n        if (form) {\n            form.addEventListener('submit', function(e) {\n                validateEmail();\n                if (errorEl.style.display !== 'none') {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            }, true);\n        }\n    }\n\n    \/\/ Init on load and also after UM AJAX re-renders the form\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', initEmailValidation);\n    } else {\n        initEmailValidation();\n    }\n\n    \/\/ Re-init after UM AJAX updates (form may be replaced)\n    if (typeof jQuery !== 'undefined') {\n        jQuery(document).ajaxComplete(function(event, xhr, settings) {\n            if (settings && settings.data && typeof settings.data === 'string' && settings.data.indexOf('um_') !== -1) {\n                setTimeout(initEmailValidation, 200);\n            }\n        });\n    }\n})();\n<\/script>\n        \n        <!-- Marketing Popup Modal -->\n                \n        <!-- Premium Modals (only for premium users) -->\n                \n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-2900","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Video Chat - ChatiMeet<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/chatimeet.com\/es\/video-chat\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Video Chat - ChatiMeet\" \/>\n<meta property=\"og:url\" content=\"https:\/\/chatimeet.com\/es\/video-chat\/\" \/>\n<meta property=\"og:site_name\" content=\"ChatiMeet\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-06T15:17:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/chatimeet.com\/wp-content\/uploads\/2023\/05\/64731f1e55365.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/chatimeet.com\\\/video-chat\\\/\",\"url\":\"https:\\\/\\\/chatimeet.com\\\/video-chat\\\/\",\"name\":\"Video Chat - ChatiMeet\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/chatimeet.com\\\/#website\"},\"datePublished\":\"2025-06-06T15:16:28+00:00\",\"dateModified\":\"2025-06-06T15:17:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/chatimeet.com\\\/video-chat\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/chatimeet.com\\\/video-chat\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/chatimeet.com\\\/video-chat\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/chatimeet.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Video Chat\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/chatimeet.com\\\/#website\",\"url\":\"https:\\\/\\\/chatimeet.com\\\/\",\"name\":\"ChatiMeet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/chatimeet.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/chatimeet.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/chatimeet.com\\\/#organization\",\"name\":\"LuckyCrush\",\"url\":\"https:\\\/\\\/chatimeet.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/chatimeet.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/chatimeet.com\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/chats-favicon.jpg\",\"contentUrl\":\"https:\\\/\\\/chatimeet.com\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/chats-favicon.jpg\",\"width\":420,\"height\":420,\"caption\":\"LuckyCrush\"},\"image\":{\"@id\":\"https:\\\/\\\/chatimeet.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Videochat - ChatiMeet","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/chatimeet.com\/es\/video-chat\/","og_locale":"es_ES","og_type":"article","og_title":"Video Chat - ChatiMeet","og_url":"https:\/\/chatimeet.com\/es\/video-chat\/","og_site_name":"ChatiMeet","article_modified_time":"2025-06-06T15:17:53+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/chatimeet.com\/wp-content\/uploads\/2023\/05\/64731f1e55365.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/chatimeet.com\/video-chat\/","url":"https:\/\/chatimeet.com\/video-chat\/","name":"Videochat - ChatiMeet","isPartOf":{"@id":"https:\/\/chatimeet.com\/#website"},"datePublished":"2025-06-06T15:16:28+00:00","dateModified":"2025-06-06T15:17:53+00:00","breadcrumb":{"@id":"https:\/\/chatimeet.com\/video-chat\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/chatimeet.com\/video-chat\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/chatimeet.com\/video-chat\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/chatimeet.com\/"},{"@type":"ListItem","position":2,"name":"Video Chat"}]},{"@type":"WebSite","@id":"https:\/\/chatimeet.com\/#website","url":"https:\/\/chatimeet.com\/","name":"ChatiMeet","description":"","publisher":{"@id":"https:\/\/chatimeet.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/chatimeet.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/chatimeet.com\/#organization","name":"LuckyCrush","url":"https:\/\/chatimeet.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/chatimeet.com\/#\/schema\/logo\/image\/","url":"https:\/\/chatimeet.com\/wp-content\/uploads\/2020\/04\/chats-favicon.jpg","contentUrl":"https:\/\/chatimeet.com\/wp-content\/uploads\/2020\/04\/chats-favicon.jpg","width":420,"height":420,"caption":"LuckyCrush"},"image":{"@id":"https:\/\/chatimeet.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/chatimeet.com\/es\/wp-json\/wp\/v2\/pages\/2900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chatimeet.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chatimeet.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chatimeet.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chatimeet.com\/es\/wp-json\/wp\/v2\/comments?post=2900"}],"version-history":[{"count":4,"href":"https:\/\/chatimeet.com\/es\/wp-json\/wp\/v2\/pages\/2900\/revisions"}],"predecessor-version":[{"id":2904,"href":"https:\/\/chatimeet.com\/es\/wp-json\/wp\/v2\/pages\/2900\/revisions\/2904"}],"wp:attachment":[{"href":"https:\/\/chatimeet.com\/es\/wp-json\/wp\/v2\/media?parent=2900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}