@glideidentity/web-client-sdk 5.0.1 → 5.1.1-beta.1

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

@@ -1,37 +1,52 @@
+/**
+ * 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 || {};
-        this.theme = this.options.theme || 'auto';
+        // Bind escape key handler
         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);
+                (_b = this.closeCallback) === null || _b === void 0 ? void 0 : _b.call(this); // Call the cancellation callback if set
                 this.close();
             }
         }
     }
+    /**
+     * Escape HTML to prevent XSS attacks
+     */
     escapeHtml(unsafe) {
         return unsafe
             .replace(/&/g, "&amp;")
@@ -40,1022 +55,540 @@ export class AuthModal {
             .replace(/"/g, "&quot;")
             .replace(/'/g, "&#039;");
     }
-    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);
+    /**
+     * 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;
         }
-        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;
+        // 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;
             }
-        }
-        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 = '';
-                }
+            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>
+        `);
             }
         }
-    }
-    setCloseCallback(callback) {
-        this.closeCallback = callback;
-    }
-    renderToggleMode(data, msg) {
-        let iosQR = '';
-        let androidQR = '';
-        if (typeof data === 'string') {
-            iosQR = data;
-            androidQR = data;
-        }
         else {
-            iosQR = data.iosQRCode;
-            androidQR = data.androidQRCode || data.iosQRCode;
-        }
-        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>
+            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>
-
-        <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();
+      `);
+        }
+        this.show();
     }
-    renderDualMode(data, msg) {
-        const qrOverlayHtml = `
-        <div class="glide-phone-animation-overlay">
-            <div class="glide-outlined-phone">
-                <div class="glide-scan-line"></div>
-            </div>
-        </div>
-    `;
+    /**
+     * Creates a modal with iOS/Android platform toggle
+     */
+    createDualPlatformQRModal(qrCodeData, statusMessage) {
         this.createModal(`
-      <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 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>
+
+        <!-- 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>
-    `, '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();
+    `);
+        // IMPORTANT: Call show() to actually display the modal!
         this.show();
     }
-    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();
-        });
+    /**
+     * Sets a callback to be called when the modal is cancelled/closed
+     */
+    setCloseCallback(callback) {
+        this.closeCallback = callback;
     }
-    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>
+    /**
+     * 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}
           </button>
+          <p class="glide-auth-helper-text">
+            You'll be redirected to complete verification
+          </p>
         </div>
-      `;
-            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();
+      `);
+            // 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');
+            }
         });
     }
-    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');
-            }
-            if (this.isOpen) {
-                document.body.appendChild(this.backdrop);
-                document.body.appendChild(this.container);
+    /**
+     * 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);
+                    }
+                }));
             }
-        }
-        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');
+            else {
+                console.error('[Modal] TS43 button not found in modal');
             }
+        });
+    }
+    /**
+     * 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 = `
-      ${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>
-      ` : ''}
+      <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>
     `;
+        // Add styles
         this.injectStyles();
-        const closeBtn = this.container.querySelector('#glide-close-btn');
+        // Add close button handler
+        const closeBtn = this.container.querySelector('.glide-auth-close');
         if (closeBtn) {
             closeBtn.addEventListener('click', () => {
                 var _a;
-                (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+                (_a = this.closeCallback) === null || _a === void 0 ? void 0 : _a.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);
-                    });
-                }
-            });
-        }
+        // 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();
+            }
+        });
     }
+    /**
+     * Injects CSS styles for the modal
+     */
     injectStyles() {
-        if (document.getElementById('glide-modal-styles'))
+        if (document.getElementById('glide-auth-styles'))
             return;
         const styles = document.createElement('style');
-        styles.id = 'glide-modal-styles';
+        styles.id = 'glide-auth-styles';
         styles.textContent = `
-      :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-backdrop {
+        backdrop-filter: blur(4px);
       }
 
-      #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-modal {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
       }
 
-      #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-header {
+        position: relative;
+        margin-bottom: 20px;
       }
 
-      #glide-modal .glide-btn-close {
+      .glide-auth-close {
         position: absolute;
-        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);
+        top: 0;
+        right: 0;
+        background: none;
         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;
-        z-index: 20;
-        box-sizing: border-box;
-        flex-shrink: 0;
-      }
-
-      #glide-modal.dark .glide-btn-close {
-        background: rgba(255, 255, 255, 0.1);
-        color: rgba(255,255,255,0.5);
+        color: #666;
+        transition: color 0.2s;
       }
 
-      #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-close:hover {
+        color: #000;
       }
 
-      .glide-title {
-        margin: 0 0 8px 0;
-        font-size: 22px;
+      .glide-auth-title {
+        margin: 0;
+        font-size: 24px;
         font-weight: 600;
-        letter-spacing: -0.01em;
-      }
-      
-      .glide-status {
-        margin: 12px 0 0 0;
-        font-size: 13px;
-        color: rgba(0,0,0,0.5);
+        color: #333;
         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-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;
+      .glide-auth-content {
+        text-align: center;
       }
-      
-      /* Move slider for Android */
-      #glide-toggle[data-active="android"] .glide-toggle-slider {
-        transform: translateX(100%);
+
+      .glide-auth-description {
+        color: #666;
+        margin: 0 0 20px 0;
+        font-size: 16px;
+        line-height: 1.5;
       }
 
-      .glide-toggle-btn {
-        flex: 1;
-        background: none;
+      .glide-auth-button {
+        background: #007AFF;
+        color: white;
         border: none;
-        padding: 0;
-        margin: 0;
-        font-size: 13px;
+        border-radius: 8px;
+        padding: 12px 24px;
+        font-size: 16px;
         font-weight: 500;
-        color: inherit;
         cursor: pointer;
-        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-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-toggle-btn span {
-        margin: 0;
-        padding: 0;
-        line-height: 1;
-      }
-      
-      #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;
+        transition: background 0.2s, transform 0.1s;
+        min-width: 200px;
       }
 
-      /* QR Area */
-      .glide-qr-area {
-        position: relative;
-        margin: 0 auto;
+      .glide-auth-button:hover:not(:disabled) {
+        background: #0051D5;
+        transform: translateY(-1px);
       }
 
-      .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-button:active {
+        transform: translateY(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-auth-button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
       }
-      
-      .glide-btn-help:hover::after {
-        opacity: 1;
+
+      .glide-auth-helper-text {
+        color: #999;
+        font-size: 14px;
+        margin: 16px 0 0 0;
       }
 
-      /* --- Outlined Phone Animation --- */
-      .glide-phone-animation-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
+      .glide-auth-qr-code {
+        max-width: 256px;
         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;
+        height: auto;
+        margin: 20px auto;
+        display: block;
       }
 
-      .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-auth-status {
+        color: #666;
+        font-size: 16px;
+        margin: 16px 0;
       }
-      
-      .glide-os-logo svg {
-        width: 20px;
-        height: 20px;
-        opacity: 0.8;
+
+      .glide-auth-error {
+        color: #FF3B30;
       }
-      
-      /* 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;
+
+      .glide-auth-qr-container,
+      .glide-auth-link-container,
+      .glide-auth-ts43-container {
         padding: 20px 0;
       }
-      
-      .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 {
+
+      /* Platform Switcher Styles */
+      .glide-platform-switcher {
         display: flex;
-        gap: 20px;
         justify-content: center;
-        margin: 24px 0;
+        gap: 10px;
+        margin-bottom: 20px;
       }
-      
-      .glide-os-choice-btn {
+
+      .glide-platform-btn {
         display: flex;
-        flex-direction: column;
         align-items: center;
-        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);
+        gap: 6px;
+        padding: 10px 20px;
+        border: 2px solid;
+        background: transparent;
+        border-radius: 8px;
         cursor: pointer;
-        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-        position: relative;
-        overflow: hidden;
         font-size: 14px;
-        color: inherit;
-      }
-      
-      #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);
+        font-weight: 600;
+        transition: all 0.2s ease;
       }
-      
-      #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;
+
+      .glide-platform-btn svg {
         flex-shrink: 0;
       }
-      
-      #glide-modal.dark .glide-btn-back {
-        background: rgba(255, 255, 255, 0.1);
-        color: rgba(255,255,255,0.5);
+
+      .glide-platform-ios {
+        border-color: #007AFF;
+        color: #007AFF;
       }
 
-      .glide-btn-back:hover {
-        background: rgba(118, 118, 128, 0.2);
+      .glide-platform-ios.active {
+        background: #007AFF;
+        color: white;
       }
-      
-      #glide-modal.dark .glide-btn-back:hover {
-        background: rgba(255, 255, 255, 0.2);
+
+      .glide-platform-ios:hover:not(.active) {
+        background: rgba(0, 122, 255, 0.1);
       }
-      
-      .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 {
+        border-color: #3DDC84;
+        color: #3DDC84;
       }
-      
-      #glide-modal.dark .glide-spinner {
-        border-color: rgba(255,255,255,0.1);
-        border-top-color: var(--glide-primary);
+
+      .glide-platform-android.active {
+        background: #3DDC84;
+        color: white;
       }
-      
-      @keyframes glide-spin {
-        to { transform: rotate(360deg); }
+
+      .glide-platform-android:hover:not(.active) {
+        background: rgba(61, 220, 132, 0.1);
       }
     `;
         document.head.appendChild(styles);
     }
+    /**
+     * Shows the modal with animation
+     */
     show() {
         var _a, _b;
-        if (!this.container || !this.backdrop || this.isOpen) {
-            if (this.isOpen && this.container && this.backdrop) {
-                document.removeEventListener('keydown', this.handleEscapeKey);
-                document.addEventListener('keydown', this.handleEscapeKey);
-            }
+        if (!this.container || !this.backdrop || this.isOpen)
             return;
-        }
         document.body.appendChild(this.backdrop);
         document.body.appendChild(this.container);
-        this.lockBodyScroll();
+        // Add escape key listener for closing modal
         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 = 'translateX(-50%) scale(1)';
+                this.container.style.transform = 'translate(-50%, -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, _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');
+        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');
         if (!platformBtns || !qrImg)
             return;
         platformBtns.forEach((btn) => {
             btn.addEventListener('click', (e) => {
                 const target = e.currentTarget;
                 const platform = target.getAttribute('data-platform');
-                if (container && platform) {
-                    container.setAttribute('data-active', platform);
-                }
+                // Update active state
                 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 camera';
+                        message.textContent = 'Scan with your iPhone to authenticate';
                 }
                 else if (platform === 'android') {
                     qrImg.src = qrImg.getAttribute('data-android') || '';
                     if (message)
-                        message.textContent = 'Scan with your Android camera';
+                        message.textContent = 'Scan with your Android device to authenticate';
                 }
             });
         });
     }
-    lockBodyScroll() {
-        this.originalBodyOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-    }
-    unlockBodyScroll() {
-        document.body.style.overflow = this.originalBodyOverflow;
-    }
+    /**
+     * Closes the modal with animation
+     */
     close() {
         if (!this.container || !this.backdrop || !this.isOpen)
             return;
-        this.isClosing = true;
+        // Remove escape key listener
         document.removeEventListener('keydown', this.handleEscapeKey);
+        // Animate out
         this.backdrop.style.opacity = '0';
         this.container.style.opacity = '0';
-        this.container.style.transform = 'translateX(-50%) scale(0.94)';
+        this.container.style.transform = 'translate(-50%, -50%) scale(0.9)';
+        // Clear any stored callbacks
         this.closeCallback = undefined;
+        // Remove after animation
         setTimeout(() => {
             var _a, _b;
-            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);
+            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);
     }
+    /**
+     * 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;
-        this.unlockBodyScroll();
+    }
+    /**
+     * Check if modal is currently open
+     */
+    isModalOpen() {
+        return this.isOpen;
     }
 }