Fix SDK timeout and improve text contrast

SDK Loading Improvements:
- Increased timeout from 5 to 15 seconds for slower connections
- Added progressive status messages during SDK loading
- Enhanced console logging for debugging
- Added fallback SDK loading mechanism with inline script
- Better error diagnostics showing Twilio object status

Text Contrast Fixes:
- Updated all #333 colors to #212529 for better readability
- Fixed browser phone title, dial buttons, timer, queue headings
- Enhanced dark mode support for all text elements
- Improved readability on both light and dark backgrounds

Technical Changes:
- waitForTwilioSDK() now waits 150 attempts (15 seconds)
- Progressive status updates at 3s, 6s, 10s intervals
- Backup SDK loading via document.createElement
- Comprehensive dark mode color coverage
- Better error messaging for network issues

Accessibility Improvements:
- Higher contrast ratios for WCAG compliance
- Consistent text color hierarchy
- Better visibility in all lighting conditions
- Enhanced mobile readability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

assets/css/browser-phone-frontend.css

@@ -17,7 +17,7 @@
 .twp-browser-phone-title {
     text-align: center;
     margin: 0 0 20px 0;
-    color: #333;
+    color: #212529;
     font-size: 1.5rem;
     font-weight: 600;
 }
@@ -166,7 +166,7 @@
     padding: 16px 8px;
     font-size: 20px;
     font-weight: 600;
-    color: #333;
+    color: #212529;
     cursor: pointer;
     transition: all 0.2s ease;
     min-height: 60px;
@@ -280,7 +280,7 @@
 .timer-value {
     font-size: 18px;
     font-weight: 600;
-    color: #333;
+    color: #212529;
     font-family: 'Courier New', monospace;
 }
 
@@ -304,7 +304,7 @@
 
 .twp-queue-section h4 {
     margin: 0 0 16px 0;
-    color: #333;
+    color: #212529;
     font-size: 1.1rem;
     text-align: center;
 }
@@ -369,7 +369,7 @@
 
 .queue-name {
     font-weight: 600;
-    color: #333;
+    color: #212529;
     margin-bottom: 4px;
 }
 
@@ -410,7 +410,7 @@
 
 .selected-queue-info h5 {
     margin: 0 0 8px 0;
-    color: #333;
+    color: #212529;
     font-size: 1rem;
 }
 
@@ -592,7 +592,15 @@
     
     .queue-name,
     .status-text,
-    .twp-phone-selection label {
+    .twp-phone-selection label,
+    .twp-browser-phone-title,
+    .twp-queue-section h4,
+    .selected-queue-info h5,
+    .timer-value {
+        color: #f7fafc;
+    }
+    
+    .twp-dial-btn {
         color: #f7fafc;
     }
     

assets/js/browser-phone-frontend.js

@@ -32,18 +32,32 @@
      */
     function waitForTwilioSDK(callback) {
         let attempts = 0;
-        const maxAttempts = 50; // 5 seconds max
+        const maxAttempts = 150; // 15 seconds max (100ms * 150)
         
         function checkTwilio() {
+            console.log('Checking Twilio SDK availability, attempt:', attempts + 1);
+            
             if (typeof Twilio !== 'undefined' && Twilio.Device) {
+                console.log('Twilio SDK loaded successfully');
                 callback();
                 return;
             }
             
             attempts++;
+            
+            // Update status message periodically
+            if (attempts === 30) { // 3 seconds
+                updateStatus('connecting', 'Loading Twilio SDK...');
+            } else if (attempts === 60) { // 6 seconds  
+                updateStatus('connecting', 'Still loading SDK...');
+            } else if (attempts === 100) { // 10 seconds
+                updateStatus('connecting', 'SDK taking longer than expected...');
+            }
+            
             if (attempts >= maxAttempts) {
+                console.error('Twilio SDK failed to load. Window.Twilio:', typeof Twilio);
                 updateStatus('offline', 'SDK load timeout');
-                showMessage('Twilio SDK failed to load within 5 seconds. Please check your internet connection and refresh the page.', 'error');
+                showMessage('Twilio SDK failed to load within 15 seconds. This may be due to a slow connection or network restrictions. Please refresh the page and try again.', 'error');
                 return;
             }
             

includes/class-twp-shortcodes.php

@@ -26,7 +26,7 @@ class TWP_Shortcodes {
         global $post;
         
         if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'twp_browser_phone')) {
-            // Enqueue Twilio Voice SDK
+            // Enqueue Twilio Voice SDK with multiple fallbacks
             wp_enqueue_script(
                 'twilio-voice-sdk',
                 'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js',
@@ -35,6 +35,23 @@ class TWP_Shortcodes {
                 false // Load in head to ensure it's available
             );
             
+            // Add backup SDK loading
+            wp_add_inline_script('twilio-voice-sdk', "
+                window.twpLoadTwilioSDK = function() {
+                    if (typeof Twilio === 'undefined') {
+                        console.warn('Primary Twilio SDK failed, attempting fallback load');
+                        var script = document.createElement('script');
+                        script.src = 'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js';
+                        script.onload = function() { console.log('Fallback Twilio SDK loaded'); };
+                        script.onerror = function() { console.error('Fallback Twilio SDK failed'); };
+                        document.head.appendChild(script);
+                    }
+                };
+                
+                // Try loading after a delay if not available
+                setTimeout(window.twpLoadTwilioSDK, 2000);
+            ", 'after');
+            
             // Enqueue our browser phone script
             wp_enqueue_script(
                 'twp-browser-phone-frontend',