Fix critical browser phone shortcode issues

Issues Fixed:
1. 🎵 Audio Error: Removed missing ringtone.mp3 causing 404 error
2. 📡 Twilio SDK Loading: Added proper SDK availability checking and retry mechanism
3. 🎨 Contrast Issues: Improved readability with darker text colors

Technical Changes:
- Removed hardcoded ringtone.mp3 reference causing 404 errors
- Added waitForTwilioSDK() function with 5-second timeout and retry logic
- Changed Twilio SDK loading to head (false flag) for better availability
- Enhanced error handling with specific Twilio SDK load failure messages
- Improved text contrast: #6c757d → #495057, #495057 → #212529
- Enhanced dark mode colors for better accessibility

UI Improvements:
- Status text: font-weight 600, color #212529 for better visibility
- Labels and selects: improved contrast ratios
- Queue info: better text color for mobile readability
- Call status: font-weight 600 for prominence
- Dark mode: complete color scheme overhaul with proper contrast

Error Handling:
- Graceful SDK loading with visual feedback
- Clear error messages for troubleshooting
- Automatic retry mechanism for network issues
- Timeout handling for slow connections

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

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

assets/js/browser-phone-frontend.js

@@ -27,32 +27,61 @@
         loadUserQueues();
     });
     
+    /**
+     * Wait for Twilio SDK to load
+     */
+    function waitForTwilioSDK(callback) {
+        let attempts = 0;
+        const maxAttempts = 50; // 5 seconds max
+        
+        function checkTwilio() {
+            if (typeof Twilio !== 'undefined' && Twilio.Device) {
+                callback();
+                return;
+            }
+            
+            attempts++;
+            if (attempts >= maxAttempts) {
+                updateStatus('offline', 'SDK load timeout');
+                showMessage('Twilio SDK failed to load within 5 seconds. Please check your internet connection and refresh the page.', 'error');
+                return;
+            }
+            
+            setTimeout(checkTwilio, 100);
+        }
+        
+        checkTwilio();
+    }
+    
     /**
      * Initialize the browser phone
      */
     function initializeBrowserPhone() {
         updateStatus('connecting', 'Initializing...');
         
-        // Generate capability token
-        $.ajax({
-            url: twp_frontend_ajax.ajax_url,
-            method: 'POST',
-            data: {
-                action: 'twp_generate_capability_token',
-                nonce: twp_frontend_ajax.nonce
-            },
-            success: function(response) {
-                if (response.success) {
-                    setupTwilioDevice(response.data.token);
-                } else {
-                    updateStatus('offline', 'Failed to initialize');
-                    showMessage('Failed to initialize browser phone: ' + (response.data || 'Unknown error'), 'error');
+        // Wait for Twilio SDK to load, then initialize
+        waitForTwilioSDK(function() {
+            // Generate capability token
+            $.ajax({
+                url: twp_frontend_ajax.ajax_url,
+                method: 'POST',
+                data: {
+                    action: 'twp_generate_capability_token',
+                    nonce: twp_frontend_ajax.nonce
+                },
+                success: function(response) {
+                    if (response.success) {
+                        setupTwilioDevice(response.data.token);
+                    } else {
+                        updateStatus('offline', 'Failed to initialize');
+                        showMessage('Failed to initialize browser phone: ' + (response.data || 'Unknown error'), 'error');
+                    }
+                },
+                error: function() {
+                    updateStatus('offline', 'Connection failed');
+                    showMessage('Failed to connect to server', 'error');
                 }
-            },
-            error: function() {
-                updateStatus('offline', 'Connection failed');
-                showMessage('Failed to connect to server', 'error');
-            }
+            });
         });
     }
     
@@ -60,6 +89,14 @@
      * Setup Twilio Device
      */
     function setupTwilioDevice(token) {
+        // Check if Twilio SDK is loaded
+        if (typeof Twilio === 'undefined' || !Twilio.Device) {
+            updateStatus('offline', 'Twilio SDK not loaded');
+            showMessage('Twilio SDK failed to load. Please refresh the page.', 'error');
+            console.error('Twilio SDK is not available');
+            return;
+        }
+        
         try {
             twilioDevice = new Twilio.Device(token, {
                 logLevel: 1,