@glideidentity/web-client-sdk 5.0.0 → 5.0.1-beta.0

package/dist/esm/core/phone-auth/ui/modal.js

@@ -1,52 +1,37 @@
-/**
- * Modal UI Component for Phone Authentication
- *
- * This file creates the UI components (modals, buttons) that are shown
- * when the SDK is NOT in headless mode. Think of it like a popup window
- * that handles the authentication flow for you.
- */
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/**
- * Creates and manages a modal dialog for authentication
- *
- * @example
- * const modal = new AuthModal({
- *   title: "Verify Your Phone",
- *   description: "Complete authentication to continue"
- * });
- * modal.show();
- */
 export class AuthModal {
     constructor(options, callbacks) {
         this.container = null;
         this.backdrop = null;
         this.isOpen = false;
+        this.currentStep = 'os-choice';
+        this.qrCodeData = null;
+        this.statusMessage = '';
+        this.originalBodyOverflow = '';
+        this.isClosing = false;
+        this.iconApple = `<svg class="glide-icon glide-icon-os" viewBox="0 0 384 512" fill="currentColor"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 52.3-11.4 69.5-34.3z"/></svg>`;
+        this.iconAndroid = `<svg class="glide-icon glide-icon-os" viewBox="0 0 576 512" fill="currentColor"><path d="M420.55,301.93a24,24,0,1,1,24-24,24,24,0,0,1-24,24m-265.1,0a24,24,0,1,1,24-24,24,24,0,0,1-24,24m273.7-144.48,47.94-83a10,10,0,1,0-17.27-10h0l-48.54,84.07a301.25,301.25,0,0,0-246.56,0L116.18,64.45a10,10,0,1,0-17.27,10h0l47.94,83C64.53,202.22,8.24,285.55,0,384H576c-8.24-98.45-64.54-181.78-146.85-226.55"/></svg>`;
+        this.iconBack = `<svg class="glide-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>`;
         this.options = options || {};
         this.callbacks = callbacks || {};
-        // Bind escape key handler
+        this.theme = this.options.theme || 'auto';
         this.handleEscapeKey = this.handleEscapeKey.bind(this);
     }
+    shouldUseDarkMode() {
+        if (this.theme === 'dark')
+            return true;
+        if (this.theme === 'light')
+            return false;
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
     handleEscapeKey(event) {
         var _a, _b;
         if (event.key === 'Escape' && this.isOpen) {
-            // Check if escape closing is enabled (default true)
             if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.closeOnEscape) !== false) {
-                (_b = this.closeCallback) === null || _b === void 0 ? void 0 : _b.call(this); // Call the cancellation callback if set
+                (_b = this.closeCallback) === null || _b === void 0 ? void 0 : _b.call(this);
                 this.close();
             }
         }
     }
-    /**
-     * Escape HTML to prevent XSS attacks
-     */
     escapeHtml(unsafe) {
         return unsafe
             .replace(/&/g, "&amp;")
@@ -55,540 +40,1022 @@ export class AuthModal {
             .replace(/"/g, "&quot;")
             .replace(/'/g, "&#039;");
     }
-    /**
-     * Shows the modal with a QR code for desktop authentication
-     * Supports both single QR code (legacy) and dual-platform QR codes (iOS + Android)
-     */
-    showQRCode(qrCodeData, statusMessage = 'Scan QR code with your phone') {
-        console.log('[Modal] showQRCode called with:', qrCodeData);
-        // If modal is already open, don't recreate it
-        if (this.isOpen) {
-            console.log('[Modal] Modal already open, skipping recreation');
-            return;
+    showQRCode(qrCodeData, statusMessage = 'Scan with your phone camera') {
+        this.qrCodeData = qrCodeData;
+        this.statusMessage = statusMessage;
+        const mode = this.options.viewMode || 'toggle';
+        if (typeof qrCodeData === 'string') {
+            this.renderToggleMode(qrCodeData, statusMessage);
         }
-        // Check if it's the new dual-platform format with VALID Android QR code
-        if (typeof qrCodeData === 'object' && qrCodeData.iosQRCode) {
-            const hasValidAndroidQR = qrCodeData.androidQRCode &&
-                qrCodeData.androidQRCode.length > 0 &&
-                qrCodeData.androidQRCode !== qrCodeData.iosQRCode;
-            console.log('[Modal] Has valid Android QR?', hasValidAndroidQR);
-            if (hasValidAndroidQR) {
-                console.log('[Modal] Using dual-platform modal');
-                this.createDualPlatformQRModal(qrCodeData, statusMessage);
-                // Note: createDualPlatformQRModal calls show() internally
-                return;
+        else {
+            switch (mode) {
+                case 'dual':
+                    this.renderDualMode(qrCodeData, statusMessage);
+                    break;
+                case 'pre-step':
+                    this.renderPreStepMode(qrCodeData, statusMessage);
+                    break;
+                case 'toggle':
+                default:
+                    this.renderToggleMode(qrCodeData, statusMessage);
+                    break;
             }
-            else {
-                console.log('[Modal] Android QR missing/empty, using single iOS QR');
-                // Only iOS QR code available - show single QR
-                this.createModal(`
-          <div class="glide-auth-qr-container">
-            <img src="${this.escapeHtml(qrCodeData.iosQRCode)}" alt="QR Code" class="glide-auth-qr-code" />
-            <p class="glide-auth-status">Scan with your iPhone to authenticate</p>
-          </div>
-        `);
+        }
+        this.show();
+    }
+    updateStatus(status, isError = false) {
+        this.statusMessage = status;
+        if (this.container) {
+            const el = this.container.querySelector('#glide-status');
+            if (el) {
+                el.textContent = status;
+                if (isError) {
+                    el.style.color = '#ff3b30';
+                }
+                else {
+                    el.style.color = '';
+                }
             }
         }
+    }
+    setCloseCallback(callback) {
+        this.closeCallback = callback;
+    }
+    renderToggleMode(data, msg) {
+        let iosQR = '';
+        let androidQR = '';
+        if (typeof data === 'string') {
+            iosQR = data;
+            androidQR = data;
+        }
         else {
-            console.log('[Modal] Using legacy single QR code modal');
-            // Legacy single QR code
-            this.createModal(`
-        <div class="glide-auth-qr-container">
-          <img src="${this.escapeHtml(qrCodeData)}" alt="QR Code" class="glide-auth-qr-code" />
-          <p class="glide-auth-status">${this.escapeHtml(statusMessage)}</p>
-        </div>
-      `);
+            iosQR = data.iosQRCode;
+            androidQR = data.androidQRCode || data.iosQRCode;
         }
-        this.show();
+        const content = `
+      <div class="glide-content">
+        <div class="glide-toggle" id="glide-toggle" data-active="ios">
+          <div class="glide-toggle-slider"></div>
+          <button class="glide-btn glide-toggle-btn active" data-platform="ios">${this.iconApple}<span>iOS</span></button>
+          <button class="glide-btn glide-toggle-btn" data-platform="android">${this.iconAndroid}<span>Android</span></button>
+        </div>
+
+        <div class="glide-qr-area">
+          <img 
+            class="glide-qr-img"
+            id="glide-qr-img" 
+            src="${this.escapeHtml(iosQR)}" 
+            alt="QR Code" 
+            class="glide-qr-img" 
+            data-ios="${this.escapeHtml(iosQR)}"
+            data-android="${this.escapeHtml(androidQR)}"
+          />
+          
+          <!-- Animation Overlay (Inside QR Area for centering) -->
+          <div id="glide-phone-overlay" class="glide-phone-animation-overlay">
+              <div class="glide-outlined-phone">
+                  <div class="glide-scan-line"></div>
+              </div>
+          </div>
+        </div>
+      </div>
+    `;
+        this.createModal(content, '', true);
+        this.setupPlatformToggles();
+        this.setupHelpInteraction();
     }
-    /**
-     * Creates a modal with iOS/Android platform toggle
-     */
-    createDualPlatformQRModal(qrCodeData, statusMessage) {
+    renderDualMode(data, msg) {
+        const qrOverlayHtml = `
+        <div class="glide-phone-animation-overlay">
+            <div class="glide-outlined-phone">
+                <div class="glide-scan-line"></div>
+            </div>
+        </div>
+    `;
         this.createModal(`
-      <div class="glide-auth-qr-container">
-        <!-- Platform Switcher -->
-        <div class="glide-platform-switcher">
-          <button class="glide-platform-btn glide-platform-ios active" data-platform="ios">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
-            </svg>
-            <span>iOS</span>
-          </button>
-          <button class="glide-platform-btn glide-platform-android" data-platform="android">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24c-2.86-1.21-6.08-1.21-8.94 0L5.65 5.67c-.19-.28-.54-.38-.83-.22-.3.16-.42.54-.26.85l1.84 3.18C4.08 11.08 2.4 13.97 2.4 17.2h19.2c0-3.23-1.68-6.12-4.0-7.72zM7.0 14.8c-.66 0-1.2-.54-1.2-1.2s.54-1.2 1.2-1.2 1.2.54 1.2 1.2-.54 1.2-1.2 1.2zm10 0c-.66 0-1.2-.54-1.2-1.2s.54-1.2 1.2-1.2 1.2.54 1.2 1.2-.54 1.2-1.2 1.2z"/>
-            </svg>
-            <span>Android</span>
-          </button>
+      <div class="glide-content glide-dual-mode">
+        <div class="glide-dual-container">
+            <div class="glide-dual-item">
+                <div class="glide-os-logo">
+                    ${this.iconApple}
+                    <span>iOS</span>
+                </div>
+                <div class="glide-qr-area">
+                    <img src="${this.escapeHtml(data.iosQRCode)}" alt="iOS QR" class="glide-qr-img" />
+                    ${qrOverlayHtml}
+                </div>
+            </div>
+            <div class="glide-dual-separator">
+                <div class="glide-separator-line"></div>
+                <span class="glide-separator-text">or</span>
+                <div class="glide-separator-line"></div>
+            </div>
+            <div class="glide-dual-item">
+                <div class="glide-os-logo">
+                    ${this.iconAndroid}
+                    <span>Android</span>
+                </div>
+                <div class="glide-qr-area">
+                    <img src="${this.escapeHtml(data.androidQRCode || data.iosQRCode)}" alt="Android QR" class="glide-qr-img" />
+                    ${qrOverlayHtml}
+                </div>
+            </div>
         </div>
-
-        <!-- QR Code Image -->
-        <img 
-          id="glide-qr-code-img" 
-          src="${this.escapeHtml(qrCodeData.iosQRCode)}" 
-          alt="QR Code" 
-          class="glide-auth-qr-code" 
-          data-ios="${this.escapeHtml(qrCodeData.iosQRCode)}"
-          data-android="${this.escapeHtml(qrCodeData.androidQRCode || '')}"
-        />
-        
-        <!-- Status Message -->
-        <p class="glide-auth-status" id="glide-platform-message">Scan with your iPhone to authenticate</p>
       </div>
-    `);
-        // IMPORTANT: Call show() to actually display the modal!
+    `, 'glide-modal-wide', true);
+        this.setupHelpInteraction();
+    }
+    renderPreStepMode(data, msg) {
+        this.currentStep = 'os-choice';
+        const contentHtml = `
+      <div class="glide-pre-step-container">
+        <button class="glide-os-choice-btn" id="glide-btn-ios">
+          ${this.iconApple}
+          <span>iOS</span>
+        </button>
+        <button class="glide-os-choice-btn" id="glide-btn-android">
+          ${this.iconAndroid}
+          <span>Android</span>
+        </button>
+      </div>
+    `;
+        this.createModal(contentHtml, '', false);
+        this.setupPreStepListeners();
         this.show();
     }
-    /**
-     * Sets a callback to be called when the modal is cancelled/closed
-     */
-    setCloseCallback(callback) {
-        this.closeCallback = callback;
+    setupPreStepListeners() {
+        var _a, _b;
+        if (!this.container)
+            return;
+        (_a = this.container.querySelector('#glide-btn-ios')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+            this.currentStep = 'ios-qr';
+            this.updatePreStepUI();
+        });
+        (_b = this.container.querySelector('#glide-btn-android')) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => {
+            this.currentStep = 'android-qr';
+            this.updatePreStepUI();
+        });
     }
-    /**
-     * Shows the modal with a button for Link authentication (App Clips)
-     * IMPORTANT: The button click is required for iOS to recognize the app link
-     */
-    showLinkButton(url, buttonText) {
-        return new Promise((resolve) => {
-            var _a, _b, _c;
-            const text = buttonText || ((_a = this.options) === null || _a === void 0 ? void 0 : _a.buttonText) || 'Open Verification App';
-            this.createModal(`
-        <div class="glide-auth-link-container">
-          <p class="glide-auth-description">
-            ${((_b = this.options) === null || _b === void 0 ? void 0 : _b.description) || 'Click below to verify your phone number'}
-          </p>
-          <button class="glide-auth-button" id="glide-auth-link-button">
-            ${text}
+    updatePreStepUI() {
+        var _a, _b, _c;
+        if (!this.container)
+            return;
+        let contentHtml = '';
+        if (this.currentStep === 'os-choice') {
+            contentHtml = `
+        <div class="glide-pre-step-container">
+          <button class="glide-os-choice-btn" id="glide-btn-ios">
+            ${this.iconApple}
+            <span>iOS</span>
+          </button>
+          <button class="glide-os-choice-btn" id="glide-btn-android">
+            ${this.iconAndroid}
+            <span>Android</span>
           </button>
-          <p class="glide-auth-helper-text">
-            You'll be redirected to complete verification
-          </p>
         </div>
-      `);
-            // Show modal first so elements are in the DOM
-            this.show();
-            // Add click handler for the button AFTER modal is in DOM
-            // CRITICAL: This click event is required for iOS to recognize the app link
-            // Do NOT call window.open automatically - it must be triggered by user interaction
-            const button = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#glide-auth-link-button');
-            if (button) {
-                button.addEventListener('click', (event) => {
-                    var _a, _b;
-                    (_b = (_a = this.callbacks) === null || _a === void 0 ? void 0 : _a.onAuthStart) === null || _b === void 0 ? void 0 : _b.call(_a);
-                    // User-initiated click is required for app links to work properly on iOS
-                    // This ensures the OS recognizes it should open an app, not just a browser tab
-                    window.open(url, '_blank');
-                    resolve();
-                });
-            }
-            else {
-                console.error('[Modal] Link button not found in modal');
-            }
+      `;
+            this.createModal(contentHtml, '', false);
+            this.setupPreStepListeners();
+        }
+        else if (this.currentStep === 'ios-qr') {
+            const qr = (typeof this.qrCodeData === 'object' && ((_a = this.qrCodeData) === null || _a === void 0 ? void 0 : _a.iosQRCode))
+                ? this.qrCodeData.iosQRCode
+                : this.qrCodeData;
+            contentHtml = `
+        <div class="glide-content">
+          <div class="glide-qr-area">
+            <img src="${this.escapeHtml(qr)}" alt="QR Code" class="glide-qr-img" />
+            
+            <!-- Animation Overlay -->
+            <div id="glide-phone-overlay" class="glide-phone-animation-overlay">
+              <div class="glide-outlined-phone">
+                <div class="glide-scan-line"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+            this.createModal(contentHtml, '', true, true);
+            this.setupBackButton();
+            this.setupHelpInteraction();
+        }
+        else if (this.currentStep === 'android-qr') {
+            const qr = (typeof this.qrCodeData === 'object' && ((_b = this.qrCodeData) === null || _b === void 0 ? void 0 : _b.androidQRCode))
+                ? this.qrCodeData.androidQRCode
+                : (typeof this.qrCodeData === 'object' && ((_c = this.qrCodeData) === null || _c === void 0 ? void 0 : _c.iosQRCode))
+                    ? this.qrCodeData.iosQRCode
+                    : this.qrCodeData;
+            contentHtml = `
+        <div class="glide-content">
+          <div class="glide-qr-area">
+            <img src="${this.escapeHtml(qr)}" alt="QR Code" class="glide-qr-img" />
+            
+            <!-- Animation Overlay -->
+            <div id="glide-phone-overlay" class="glide-phone-animation-overlay">
+              <div class="glide-outlined-phone">
+                <div class="glide-scan-line"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+            this.createModal(contentHtml, '', true, true);
+            this.setupBackButton();
+            this.setupHelpInteraction();
+        }
+    }
+    setupBackButton() {
+        var _a;
+        if (!this.container)
+            return;
+        (_a = this.container.querySelector('#glide-back-btn')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+            this.currentStep = 'os-choice';
+            this.updatePreStepUI();
         });
     }
-    /**
-     * Shows the modal with a button for TS43 authentication
-     * IMPORTANT: The button click is required for Digital Credentials API (transient activation)
-     */
-    showTS43Button(onAuthenticate) {
-        return new Promise((resolve, reject) => {
-            var _a, _b, _c;
-            const text = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.buttonText) || 'Verify with Carrier';
-            this.createModal(`
-        <div class="glide-auth-ts43-container">
-          <p class="glide-auth-description">
-            ${((_b = this.options) === null || _b === void 0 ? void 0 : _b.description) || 'Verify using your carrier credentials'}
-          </p>
-          <button class="glide-auth-button" id="glide-auth-ts43-button">
-            ${text}
-          </button>
-          <p class="glide-auth-helper-text">
-            Secure verification through your mobile carrier
-          </p>
-        </div>
-      `);
-            // Show modal first so elements are in the DOM
-            this.show();
-            // Add click handler for the button AFTER modal is in DOM
-            // CRITICAL: Digital Credentials API requires "transient activation" (user interaction)
-            // Do NOT call onAuthenticate automatically - it must be triggered by user click
-            const button = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#glide-auth-ts43-button');
-            if (button) {
-                button.addEventListener('click', (event) => __awaiter(this, void 0, void 0, function* () {
-                    var _a, _b, _c, _d, _e, _f;
-                    (_b = (_a = this.callbacks) === null || _a === void 0 ? void 0 : _a.onAuthStart) === null || _b === void 0 ? void 0 : _b.call(_a);
-                    button.setAttribute('disabled', 'true');
-                    button.textContent = 'Verifying...';
-                    try {
-                        const result = yield onAuthenticate();
-                        (_d = (_c = this.callbacks) === null || _c === void 0 ? void 0 : _c.onAuthComplete) === null || _d === void 0 ? void 0 : _d.call(_c, result);
-                        resolve(result);
-                        this.close();
-                    }
-                    catch (error) {
-                        (_f = (_e = this.callbacks) === null || _e === void 0 ? void 0 : _e.onError) === null || _f === void 0 ? void 0 : _f.call(_e, error);
-                        button.removeAttribute('disabled');
-                        button.textContent = text;
-                        reject(error);
-                    }
-                }));
+    createModal(content, extraClass = '', includeHelpButton = false, includeBackButton = false) {
+        var _a, _b, _c, _d, _e;
+        if (this.isClosing) {
+            this.isClosing = false;
+            this.cleanup();
+        }
+        if (!this.container) {
+            this.backdrop = document.createElement('div');
+            this.backdrop.className = 'glide-backdrop';
+            this.backdrop.id = 'glide-backdrop';
+            this.container = document.createElement('div');
+            this.container.className = `glide-modal ${((_a = this.options) === null || _a === void 0 ? void 0 : _a.className) || ''} ${extraClass}`;
+            this.container.id = 'glide-modal';
+            if (this.shouldUseDarkMode()) {
+                this.container.classList.add('dark');
             }
-            else {
-                console.error('[Modal] TS43 button not found in modal');
+            if (this.isOpen) {
+                document.body.appendChild(this.backdrop);
+                document.body.appendChild(this.container);
+            }
+        }
+        else {
+            this.container.className = `glide-modal ${((_b = this.options) === null || _b === void 0 ? void 0 : _b.className) || ''} ${extraClass}`;
+            if (this.shouldUseDarkMode()) {
+                this.container.classList.add('dark');
             }
-        });
-    }
-    /**
-     * Updates the status message in the modal
-     */
-    updateStatus(message, isError = false) {
-        var _a;
-        const statusEl = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.glide-auth-status');
-        if (statusEl) {
-            statusEl.textContent = message;
-            statusEl.className = isError ? 'glide-auth-status glide-auth-error' : 'glide-auth-status';
         }
-    }
-    /**
-     * Creates the modal HTML structure
-     */
-    createModal(content) {
-        var _a, _b, _c;
-        // Clean up any existing modal
-        this.cleanup();
-        // Create backdrop (dark overlay)
-        this.backdrop = document.createElement('div');
-        this.backdrop.className = 'glide-auth-backdrop';
-        this.backdrop.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.5);
-      z-index: 9998;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    `;
-        // Create modal container
-        this.container = document.createElement('div');
-        this.container.className = `glide-auth-modal ${((_a = this.options) === null || _a === void 0 ? void 0 : _a.className) || ''}`;
-        this.container.style.cssText = `
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.9);
-      background: white;
-      border-radius: 12px;
-      padding: 24px;
-      max-width: 400px;
-      width: 90%;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-      z-index: 9999;
-      opacity: 0;
-      transition: opacity 0.3s ease, transform 0.3s ease;
-    `;
-        // Add modal content
         this.container.innerHTML = `
-      <div class="glide-auth-header">
-        ${((_b = this.options) === null || _b === void 0 ? void 0 : _b.showCloseButton) !== false ? `
-          <button class="glide-auth-close" aria-label="Close">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="18" y1="6" x2="6" y2="18"></line>
-              <line x1="6" y1="6" x2="18" y2="18"></line>
-            </svg>
-          </button>
-        ` : ''}
-        <h2 class="glide-auth-title">${((_c = this.options) === null || _c === void 0 ? void 0 : _c.title) || 'Phone Verification'}</h2>
-      </div>
-      <div class="glide-auth-content">
-        ${content}
-      </div>
+      ${includeBackButton ? `
+        <button class="glide-btn glide-btn-back" id="glide-back-btn" aria-label="Back">
+          ${this.iconBack}
+        </button>
+      ` : ''}
+      ${((_c = this.options) === null || _c === void 0 ? void 0 : _c.showCloseButton) !== false ? `
+        <button class="glide-btn glide-btn-close" id="glide-close-btn" aria-label="Close">
+          <svg class="glide-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      ` : ''}
+      <h2 class="glide-title">${((_d = this.options) === null || _d === void 0 ? void 0 : _d.title) || 'Scan to Verify'}</h2>
+      <div id="glide-modal-content">${content}</div>
+      <p class="glide-status" id="glide-status">${((_e = this.options) === null || _e === void 0 ? void 0 : _e.description) || ''}</p>
+      ${includeHelpButton ? `
+        <button class="glide-btn glide-btn-help" id="glide-help-btn">?</button>
+      ` : ''}
     `;
-        // Add styles
         this.injectStyles();
-        // Add close button handler
-        const closeBtn = this.container.querySelector('.glide-auth-close');
+        const closeBtn = this.container.querySelector('#glide-close-btn');
         if (closeBtn) {
             closeBtn.addEventListener('click', () => {
                 var _a;
-                (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this); // Call cancellation callback if set
+                (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this);
                 this.close();
             });
         }
-        // Add backdrop click handler
-        this.backdrop.addEventListener('click', (e) => {
-            var _a, _b;
-            // Only close if backdrop itself was clicked and closeOnBackdrop is enabled (default true)
-            if (e.target === this.backdrop && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.closeOnBackdrop) !== false) {
-                (_b = this.closeCallback) === null || _b === void 0 ? void 0 : _b.call(this); // Call cancellation callback if set
-                this.close();
-            }
-        });
+        if (this.backdrop) {
+            this.backdrop.onclick = (e) => {
+                var _a, _b;
+                if (e.target === this.backdrop && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.closeOnBackdrop) !== false) {
+                    (_b = this.closeCallback) === null || _b === void 0 ? void 0 : _b.call(this);
+                    this.close();
+                }
+            };
+        }
+    }
+    setupHelpInteraction() {
+        var _a;
+        const trigger = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#glide-help-btn');
+        if (trigger) {
+            trigger.addEventListener('click', () => {
+                var _a;
+                const overlays = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.glide-phone-animation-overlay');
+                if (overlays) {
+                    overlays.forEach(overlay => {
+                        overlay.classList.remove('playing');
+                        void overlay.offsetWidth;
+                        overlay.classList.add('playing');
+                        setTimeout(() => {
+                            overlay.classList.remove('playing');
+                        }, 3000);
+                    });
+                }
+            });
+        }
     }
-    /**
-     * Injects CSS styles for the modal
-     */
     injectStyles() {
-        if (document.getElementById('glide-auth-styles'))
+        if (document.getElementById('glide-modal-styles'))
             return;
         const styles = document.createElement('style');
-        styles.id = 'glide-auth-styles';
+        styles.id = 'glide-modal-styles';
         styles.textContent = `
-      .glide-auth-backdrop {
-        backdrop-filter: blur(4px);
+      :root {
+        --glide-primary: #007AFF;
+        --glide-text: #1d1d1f;
+        --glide-bg-light: rgba(255, 255, 255, 0.6);
+        --glide-bg-dark: rgba(30, 30, 30, 0.6);
+        --glide-phone-border: #000000; /* High Contrast Black */
+        
+        /* Button sizes */
+        --glide-btn-size: 28px;
+        --glide-help-btn-size: 24px;
+        --glide-toggle-icon-size: 14px;
+        --glide-dual-icon-size: 18px;
+      }
+
+      #glide-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.2);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        z-index: 9998;
+        opacity: 0;
+        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
       }
 
-      .glide-auth-modal {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      #glide-modal {
+        position: fixed;
+        top: 20px;
+        left: 50%;
+        transform: translateX(-50%) scale(0.94);
+        background: var(--glide-bg-light);
+        backdrop-filter: blur(24px) saturate(180%);
+        -webkit-backdrop-filter: blur(24px) saturate(180%);
+        border-radius: 24px;
+        padding: 32px;
+        width: 360px;
+        max-width: 90%;
+        box-shadow: 
+            0 20px 40px rgba(0,0,0,0.2),
+            0 0 0 1px rgba(255,255,255,0.6) inset,
+            0 0 0 1px rgba(0,0,0,0.05);
+        z-index: 9999;
+        opacity: 0;
+        transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        text-align: center;
+        color: var(--glide-text);
+      }
+      
+      #glide-modal.glide-modal-wide {
+        width: 600px;
+        max-width: 95vw;
       }
 
-      .glide-auth-header {
-        position: relative;
-        margin-bottom: 20px;
+      #glide-modal.dark {
+        background: var(--glide-bg-dark);
+        color: white;
+        box-shadow: 
+            0 20px 40px rgba(0,0,0,0.4),
+            0 0 0 1px rgba(255,255,255,0.15) inset,
+            0 0 0 1px rgba(0,0,0,0.5);
+        --glide-phone-border: #ffffff; /* High Contrast White */
       }
 
-      .glide-auth-close {
+      #glide-modal .glide-btn-close {
         position: absolute;
-        top: 0;
-        right: 0;
-        background: none;
+        top: 16px;
+        right: 16px;
+        width: var(--glide-btn-size);
+        height: var(--glide-btn-size);
+        min-width: var(--glide-btn-size);
+        min-height: var(--glide-btn-size);
+        max-width: var(--glide-btn-size);
+        max-height: var(--glide-btn-size);
+        background: rgba(118, 118, 128, 0.12);
         border: none;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
+        color: rgba(0,0,0,0.5);
+        transition: background 0.2s;
         padding: 0;
-        color: #666;
-        transition: color 0.2s;
+        z-index: 20;
+        box-sizing: border-box;
+        flex-shrink: 0;
       }
 
-      .glide-auth-close:hover {
-        color: #000;
+      #glide-modal.dark .glide-btn-close {
+        background: rgba(255, 255, 255, 0.1);
+        color: rgba(255,255,255,0.5);
       }
 
-      .glide-auth-title {
-        margin: 0;
-        font-size: 24px;
-        font-weight: 600;
-        color: #333;
-        text-align: center;
+      #glide-modal .glide-btn-close:hover {
+        background: rgba(118, 118, 128, 0.2);
+      }
+      
+      #glide-modal.dark .glide-btn-close:hover {
+        background: rgba(255, 255, 255, 0.2);
       }
 
-      .glide-auth-content {
+      .glide-title {
+        margin: 0 0 8px 0;
+        font-size: 22px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+      
+      .glide-status {
+        margin: 12px 0 0 0;
+        font-size: 13px;
+        color: rgba(0,0,0,0.5);
         text-align: center;
+        min-height: 18px;
+      }
+      
+      .glide-status:empty {
+        display: none;
+      }
+      
+      #glide-modal.dark .glide-status {
+        color: rgba(255,255,255,0.5);
+      }
+      
+      .glide-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+      }
+      
+      /* --- Sliding Toggle Switch --- */
+      #glide-toggle {
+        background: rgba(118, 118, 128, 0.12);
+        padding: 2px;
+        border-radius: 8px;
+        display: inline-flex;
+        margin-bottom: 24px;
+        margin-top: 16px;
+        position: relative;
+        height: 32px;
+        width: 200px;
+        box-sizing: border-box;
       }
 
-      .glide-auth-description {
-        color: #666;
-        margin: 0 0 20px 0;
-        font-size: 16px;
-        line-height: 1.5;
+      #glide-modal.dark #glide-toggle {
+        background: rgba(118, 118, 128, 0.24);
+      }
+      
+      /* The sliding background */
+      .glide-toggle-slider {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: calc(50% - 2px);
+        height: calc(100% - 4px);
+        background: white;
+        border-radius: 6px;
+        box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04);
+        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        z-index: 0;
+      }
+      
+      #glide-modal.dark .glide-toggle-slider {
+        background: #636366;
+      }
+      
+      /* Move slider for Android */
+      #glide-toggle[data-active="android"] .glide-toggle-slider {
+        transform: translateX(100%);
       }
 
-      .glide-auth-button {
-        background: #007AFF;
-        color: white;
+      .glide-toggle-btn {
+        flex: 1;
+        background: none;
         border: none;
-        border-radius: 8px;
-        padding: 12px 24px;
-        font-size: 16px;
+        padding: 0;
+        margin: 0;
+        font-size: 13px;
         font-weight: 500;
+        color: inherit;
         cursor: pointer;
-        transition: background 0.2s, transform 0.1s;
-        min-width: 200px;
+        position: relative;
+        z-index: 1;
+        transition: color 0.2s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        min-height: auto;
+        height: auto;
+        min-width: auto;
+        border-radius: 0;
       }
-
-      .glide-auth-button:hover:not(:disabled) {
-        background: #0051D5;
-        transform: translateY(-1px);
+      
+      #glide-modal .glide-toggle-btn .glide-icon-os,
+      #glide-modal .glide-toggle-btn svg {
+        width: var(--glide-toggle-icon-size);
+        height: var(--glide-toggle-icon-size);
+        flex-shrink: 0;
+        margin: 0;
+        padding: 0;
       }
-
-      .glide-auth-button:active {
-        transform: translateY(0);
+      
+      .glide-toggle-btn span {
+        margin: 0;
+        padding: 0;
+        line-height: 1;
       }
-
-      .glide-auth-button:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
+      
+      #glide-modal.dark .glide-toggle-btn {
+        color: rgba(255,255,255,0.6);
+      }
+      
+      #glide-toggle[data-active="ios"] .glide-toggle-btn[data-platform="ios"],
+      #glide-toggle[data-active="android"] .glide-toggle-btn[data-platform="android"] {
+        color: #1d1d1f;
+      }
+      
+      #glide-modal.dark #glide-toggle[data-active="ios"] .glide-toggle-btn[data-platform="ios"],
+      #glide-modal.dark #glide-toggle[data-active="android"] .glide-toggle-btn[data-platform="android"] {
+        color: white;
       }
 
-      .glide-auth-helper-text {
-        color: #999;
-        font-size: 14px;
-        margin: 16px 0 0 0;
+      /* QR Area */
+      .glide-qr-area {
+        position: relative;
+        margin: 0 auto;
       }
 
-      .glide-auth-qr-code {
-        max-width: 256px;
-        width: 100%;
-        height: auto;
-        margin: 20px auto;
+      .glide-qr-img {
+        width: 200px;
+        height: 200px;
+        object-fit: contain;
         display: block;
+        border-radius: 16px;
+      }
+      
+      /* Dual Mode QR Area - no extra padding, same as single mode */
+      .glide-dual-mode .glide-qr-area {
+        background: transparent;
+        padding: 0;
+      }
+      
+      .glide-dual-mode .glide-qr-img {
+        width: 180px;
+        height: 180px;
+        border-radius: 16px;
+      }
+      
+      /* --- Help Icon & Interaction --- */
+      .glide-btn-help {
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+        width: var(--glide-help-btn-size);
+        height: var(--glide-help-btn-size);
+        min-width: var(--glide-help-btn-size);
+        min-height: var(--glide-help-btn-size);
+        max-width: var(--glide-help-btn-size);
+        max-height: var(--glide-help-btn-size);
+        border-radius: 50%;
+        border: 1.5px solid rgba(0,0,0,0.2);
+        color: rgba(0,0,0,0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1;
+        cursor: pointer;
+        transition: all 0.2s;
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+        z-index: 10;
+      }
+      
+      #glide-modal.dark .glide-btn-help {
+        border-color: rgba(255,255,255,0.3);
+        color: rgba(255,255,255,0.5);
       }
 
-      .glide-auth-status {
-        color: #666;
-        font-size: 16px;
-        margin: 16px 0;
+      .glide-btn-help:hover {
+        border-color: var(--glide-primary);
+        color: var(--glide-primary);
+        background: rgba(0, 122, 255, 0.1);
+      }
+      
+      /* Tooltip */
+      .glide-btn-help::after {
+        content: "Need help?";
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-8px);
+        background: rgba(0,0,0,0.8);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        white-space: nowrap;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+      }
+      
+      .glide-btn-help:hover::after {
+        opacity: 1;
       }
 
-      .glide-auth-error {
-        color: #FF3B30;
+      /* --- Outlined Phone Animation --- */
+      .glide-phone-animation-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.3s;
+        border-radius: 16px;
+        background: rgba(255,255,255,0.8);
+      }
+      
+      #glide-modal.dark .glide-phone-animation-overlay {
+        background: rgba(0,0,0,0.6);
+      }
+      
+      .glide-phone-animation-overlay.playing {
+        opacity: 1;
       }
 
-      .glide-auth-qr-container,
-      .glide-auth-link-container,
-      .glide-auth-ts43-container {
+      .glide-outlined-phone {
+        width: 100px;
+        height: 180px;
+        border: 4px solid var(--glide-phone-border);
+        border-radius: 16px;
+        position: relative;
+        background: transparent;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+        transform: translateY(20px);
+      }
+      
+      /* Notch */
+      .glide-outlined-phone::before {
+        content: '';
+        position: absolute;
+        top: -1px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40%;
+        height: 12px;
+        background: var(--glide-phone-border);
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
+      
+      /* Scanning Line */
+      .glide-scan-line {
+        position: absolute;
+        top: 10%;
+        left: 5%;
+        width: 90%;
+        height: 2px;
+        background: var(--glide-primary);
+        box-shadow: 0 0 8px var(--glide-primary);
+        opacity: 0;
+      }
+      
+      /* Animation Keyframes */
+      @keyframes glide-scan-motion {
+        0% { top: 10%; opacity: 0; }
+        10% { opacity: 1; }
+        90% { opacity: 1; }
+        100% { top: 90%; opacity: 0; }
+      }
+      
+      .glide-phone-animation-overlay.playing .glide-outlined-phone {
+        animation: glide-phone-appear 3s ease-in-out forwards;
+      }
+      
+      .glide-phone-animation-overlay.playing .glide-scan-line {
+        animation: glide-scan-motion 2s ease-in-out 0.5s infinite;
+      }
+      
+      @keyframes glide-phone-appear {
+        0% { transform: translateY(20px); opacity: 0; }
+        10% { transform: translateY(0); opacity: 1; }
+        90% { transform: translateY(0); opacity: 1; }
+        100% { transform: translateY(20px); opacity: 0; }
+      }
+      
+      /* Dual Mode */
+      .glide-dual-container {
+        display: flex;
+        justify-content: center;
+        align-items: stretch;
+        gap: 32px;
+        margin-top: 20px;
+      }
+      
+      .glide-dual-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      
+      .glide-os-logo {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+        margin-bottom: 12px;
+        font-size: 15px;
+        color: inherit;
+      }
+      
+      /* Dual mode OS logo - aligned icons with text, spacing to QR */
+      .glide-dual-mode .glide-os-logo {
+        margin-bottom: 12px; /* Space between label and QR code */
+      }
+      
+      #glide-modal .glide-dual-mode .glide-os-logo .glide-icon-os,
+      #glide-modal .glide-dual-mode .glide-os-logo svg {
+        width: var(--glide-dual-icon-size);
+        height: var(--glide-dual-icon-size);
+        margin: 0;
+        padding: 0;
+        flex-shrink: 0;
+      }
+      
+      .glide-dual-mode .glide-os-logo span {
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+      }
+      
+      .glide-os-logo svg {
+        width: 20px;
+        height: 20px;
+        opacity: 0.8;
+      }
+      
+      /* Dual Mode Separator - aligned to QR codes only */
+      .glide-dual-separator {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        align-self: stretch;
+        /* Offset for OS label (18px icon + 12px margin = ~30px) */
+        margin-top: 30px;
         padding: 20px 0;
       }
-
-      /* Platform Switcher Styles */
-      .glide-platform-switcher {
+      
+      .glide-separator-line {
+        width: 1px;
+        flex: 1;
+        background: linear-gradient(to bottom, transparent, rgba(128,128,128,0.3), transparent);
+      }
+      
+      .glide-separator-text {
+        padding: 8px 0;
+        font-size: 11px;
+        font-weight: 500;
+        color: rgba(128,128,128,0.5);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+      
+      #glide-modal.dark .glide-separator-line {
+        background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent);
+      }
+      
+      #glide-modal.dark .glide-separator-text {
+        color: rgba(255,255,255,0.4);
+      }
+      
+      /* Pre-Step */
+      .glide-pre-step-container {
         display: flex;
+        gap: 20px;
         justify-content: center;
-        gap: 10px;
-        margin-bottom: 20px;
+        margin: 24px 0;
       }
-
-      .glide-platform-btn {
+      
+      .glide-os-choice-btn {
         display: flex;
+        flex-direction: column;
         align-items: center;
-        gap: 6px;
-        padding: 10px 20px;
-        border: 2px solid;
-        background: transparent;
-        border-radius: 8px;
+        justify-content: center;
+        width: 140px;
+        height: 140px;
+        border: 1px solid rgba(0,0,0,0.08);
+        border-radius: 20px;
+        background: rgba(255,255,255,0.4);
         cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        position: relative;
+        overflow: hidden;
         font-size: 14px;
-        font-weight: 600;
-        transition: all 0.2s ease;
+        color: inherit;
       }
-
-      .glide-platform-btn svg {
+      
+      #glide-modal.dark .glide-os-choice-btn {
+        background: rgba(255,255,255,0.05);
+        border-color: rgba(255,255,255,0.1);
+        color: white;
+      }
+      
+      .glide-os-choice-btn:hover {
+        background: rgba(255,255,255,0.9);
+        transform: translateY(-4px);
+        box-shadow: 0 12px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.04);
+        border-color: var(--glide-primary);
+      }
+      
+      #glide-modal.dark .glide-os-choice-btn:hover {
+        background: rgba(255,255,255,0.15);
+        box-shadow: 0 12px 24px rgba(0,0,0,0.3);
+        border-color: var(--glide-primary);
+      }
+      
+      .glide-icon-os {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 12px;
+        transition: transform 0.3s;
+        fill: currentColor;
+      }
+      
+      .glide-os-choice-btn:hover .glide-icon-os {
+        transform: scale(1.1);
+      }
+      
+      #glide-modal .glide-btn-back {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        width: var(--glide-btn-size);
+        height: var(--glide-btn-size);
+        min-width: var(--glide-btn-size);
+        min-height: var(--glide-btn-size);
+        max-width: var(--glide-btn-size);
+        max-height: var(--glide-btn-size);
+        background: rgba(118, 118, 128, 0.12);
+        border: none;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        color: rgba(0,0,0,0.5);
+        transition: background 0.2s;
+        z-index: 20;
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
         flex-shrink: 0;
       }
-
-      .glide-platform-ios {
-        border-color: #007AFF;
-        color: #007AFF;
+      
+      #glide-modal.dark .glide-btn-back {
+        background: rgba(255, 255, 255, 0.1);
+        color: rgba(255,255,255,0.5);
       }
 
-      .glide-platform-ios.active {
-        background: #007AFF;
-        color: white;
+      .glide-btn-back:hover {
+        background: rgba(118, 118, 128, 0.2);
       }
-
-      .glide-platform-ios:hover:not(.active) {
-        background: rgba(0, 122, 255, 0.1);
+      
+      #glide-modal.dark .glide-btn-back:hover {
+        background: rgba(255, 255, 255, 0.2);
       }
-
-      .glide-platform-android {
-        border-color: #3DDC84;
-        color: #3DDC84;
+      
+      .glide-spinner {
+        width: 40px;
+        height: 40px;
+        border: 3px solid rgba(0,0,0,0.1);
+        border-top-color: var(--glide-primary);
+        border-radius: 50%;
+        animation: glide-spin 1s linear infinite;
+        margin: 40px auto;
       }
-
-      .glide-platform-android.active {
-        background: #3DDC84;
-        color: white;
+      
+      #glide-modal.dark .glide-spinner {
+        border-color: rgba(255,255,255,0.1);
+        border-top-color: var(--glide-primary);
       }
-
-      .glide-platform-android:hover:not(.active) {
-        background: rgba(61, 220, 132, 0.1);
+      
+      @keyframes glide-spin {
+        to { transform: rotate(360deg); }
       }
     `;
         document.head.appendChild(styles);
     }
-    /**
-     * Shows the modal with animation
-     */
     show() {
         var _a, _b;
-        if (!this.container || !this.backdrop || this.isOpen)
+        if (!this.container || !this.backdrop || this.isOpen) {
+            if (this.isOpen && this.container && this.backdrop) {
+                document.removeEventListener('keydown', this.handleEscapeKey);
+                document.addEventListener('keydown', this.handleEscapeKey);
+            }
             return;
+        }
         document.body.appendChild(this.backdrop);
         document.body.appendChild(this.container);
-        // Add escape key listener for closing modal
+        this.lockBodyScroll();
         document.addEventListener('keydown', this.handleEscapeKey);
-        // Setup platform toggle handlers if they exist
-        this.setupPlatformToggles();
-        // Trigger animation
         requestAnimationFrame(() => {
             if (this.backdrop && this.container) {
                 this.backdrop.style.opacity = '1';
                 this.container.style.opacity = '1';
-                this.container.style.transform = 'translate(-50%, -50%) scale(1)';
+                this.container.style.transform = 'translateX(-50%) scale(1)';
             }
         });
         this.isOpen = true;
         (_b = (_a = this.callbacks) === null || _a === void 0 ? void 0 : _a.onOpen) === null || _b === void 0 ? void 0 : _b.call(_a);
     }
-    /**
-     * Setup click handlers for iOS/Android platform toggle
-     */
     setupPlatformToggles() {
-        var _a, _b, _c;
-        const platformBtns = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.glide-platform-btn');
-        const qrImg = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector('#glide-qr-code-img');
-        const message = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#glide-platform-message');
+        var _a, _b, _c, _d;
+        const container = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelector('#glide-toggle');
+        const platformBtns = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.glide-toggle-btn');
+        const qrImg = (_c = this.container) === null || _c === void 0 ? void 0 : _c.querySelector('#glide-qr-img');
+        const message = (_d = this.container) === null || _d === void 0 ? void 0 : _d.querySelector('#glide-platform-message');
         if (!platformBtns || !qrImg)
             return;
         platformBtns.forEach((btn) => {
             btn.addEventListener('click', (e) => {
                 const target = e.currentTarget;
                 const platform = target.getAttribute('data-platform');
-                // Update active state
+                if (container && platform) {
+                    container.setAttribute('data-active', platform);
+                }
                 platformBtns.forEach(b => b.classList.remove('active'));
                 target.classList.add('active');
-                // Switch QR code
                 if (platform === 'ios') {
                     qrImg.src = qrImg.getAttribute('data-ios') || '';
                     if (message)
-                        message.textContent = 'Scan with your iPhone to authenticate';
+                        message.textContent = 'Scan with your iPhone camera';
                 }
                 else if (platform === 'android') {
                     qrImg.src = qrImg.getAttribute('data-android') || '';
                     if (message)
-                        message.textContent = 'Scan with your Android device to authenticate';
+                        message.textContent = 'Scan with your Android camera';
                 }
             });
         });
     }
-    /**
-     * Closes the modal with animation
-     */
+    lockBodyScroll() {
+        this.originalBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    unlockBodyScroll() {
+        document.body.style.overflow = this.originalBodyOverflow;
+    }
     close() {
         if (!this.container || !this.backdrop || !this.isOpen)
             return;
-        // Remove escape key listener
+        this.isClosing = true;
         document.removeEventListener('keydown', this.handleEscapeKey);
-        // Animate out
         this.backdrop.style.opacity = '0';
         this.container.style.opacity = '0';
-        this.container.style.transform = 'translate(-50%, -50%) scale(0.9)';
-        // Clear any stored callbacks
+        this.container.style.transform = 'translateX(-50%) scale(0.94)';
         this.closeCallback = undefined;
-        // Remove after animation
         setTimeout(() => {
             var _a, _b;
-            this.cleanup();
-            this.isOpen = false;
-            (_b = (_a = this.callbacks) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }, 300);
+            if (this.isClosing) {
+                this.cleanup();
+                this.isOpen = false;
+                this.isClosing = false;
+                (_b = (_a = this.callbacks) === null || _a === void 0 ? void 0 : _a.onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        }, 400);
     }
-    /**
-     * Removes modal elements from DOM
-     */
     cleanup() {
         var _a, _b;
         (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
         (_b = this.backdrop) === null || _b === void 0 ? void 0 : _b.remove();
         this.container = null;
         this.backdrop = null;
-    }
-    /**
-     * Check if modal is currently open
-     */
-    isModalOpen() {
-        return this.isOpen;
+        this.unlockBodyScroll();
     }
 }