feat: implement WebRTC P2P file transfer with detection and fallback

Implemented complete WebRTC peer-to-peer file transfer system for match chat:

**Core WebRTC Implementation:**
- Created useWebRTC hook with RTCPeerConnection and RTCDataChannel
- P2P file transfer with 16KB chunking for large files (tested up to 700MB)
- Real-time progress monitoring for sender and receiver
- Automatic file download on receiver side
- End-to-end encryption via DTLS (native WebRTC)
- ICE candidate exchange via Socket.IO signaling
- Support for host candidates (localhost testing)

**WebRTC Detection & User Experience:**
- Automatic WebRTC capability detection on page load
- Detects if ICE candidates can be generated (fails in Opera, privacy-focused browsers, VPNs)
- User-friendly warning component with fix suggestions
- Graceful degradation: disables WebRTC button when blocked
- Suggests alternative methods (video links via Google Drive/Dropbox)

**Socket.IO Improvements:**
- Fixed multiple socket instance creation issue
- Implemented socket instance reuse pattern
- Disabled React.StrictMode to prevent reconnection loops in development

**Technical Details:**
- RTCPeerConnection with configurable STUN servers (currently using localhost config)
- RTCDataChannel with ordered delivery
- Comprehensive logging for debugging (ICE gathering, connection states, signaling)
- Match room-based signaling relay via Socket.IO
- Authorization checks for all WebRTC signaling events

**Files Changed:**
- frontend/src/hooks/useWebRTC.js - Complete WebRTC implementation
- frontend/src/utils/webrtcDetection.js - WebRTC capability detection
- frontend/src/components/WebRTCWarning.jsx - User warning component
- frontend/src/pages/MatchChatPage.jsx - WebRTC integration
- frontend/src/services/socket.js - Socket instance reuse
- frontend/src/main.jsx - Disabled StrictMode for Socket.IO stability

**Testing:**
- ✅ Verified working in Chrome (ICE candidates generated)
- ✅ Tested with 700MB file transfer
- ✅ Detection working in Opera (shows warning when WebRTC blocked)
- ✅ P2P connection establishment and DataChannel opening
- ✅ File chunking and progress monitoring

**TODO:**
- Add STUN server configuration for production (NAT traversal)
- Consider server-based upload fallback for blocked users

frontend/src/utils/webrtcDetection.js

@@ -0,0 +1,123 @@
+/**
+ * WebRTC Detection Utility
+ *
+ * Detects if WebRTC ICE candidate generation is working.
+ * This can fail due to:
+ * - Browser privacy settings (Opera, Brave)
+ * - VPN extensions blocking WebRTC
+ * - Corporate firewalls
+ * - Browser not supporting WebRTC
+ */
+
+/**
+ * Test if WebRTC can generate ICE candidates
+ * @returns {Promise<{supported: boolean, hasIceCandidates: boolean, error: string|null}>}
+ */
+export async function detectWebRTCSupport() {
+  const result = {
+    supported: false,
+    hasIceCandidates: false,
+    error: null,
+  };
+
+  // Check if RTCPeerConnection is available
+  if (!window.RTCPeerConnection) {
+    result.error = 'RTCPeerConnection not available in this browser';
+    return result;
+  }
+
+  result.supported = true;
+
+  // Test ICE candidate generation
+  try {
+    const pc = new RTCPeerConnection({
+      iceServers: [], // No STUN servers for quick test
+    });
+
+    let candidateReceived = false;
+
+    // Wait for ICE candidates
+    const candidatePromise = new Promise((resolve) => {
+      pc.onicecandidate = (event) => {
+        if (event.candidate) {
+          candidateReceived = true;
+          resolve(true);
+        } else if (event.candidate === null) {
+          // Gathering complete
+          resolve(candidateReceived);
+        }
+      };
+
+      // Timeout after 3 seconds
+      setTimeout(() => {
+        resolve(candidateReceived);
+      }, 3000);
+    });
+
+    // Create a data channel and offer to trigger ICE gathering
+    pc.createDataChannel('test');
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+
+    // Wait for candidates
+    result.hasIceCandidates = await candidatePromise;
+
+    // Cleanup
+    pc.close();
+
+    if (!result.hasIceCandidates) {
+      result.error = 'ICE candidates not generated - WebRTC may be blocked by browser settings or extensions';
+    }
+
+    return result;
+  } catch (error) {
+    result.error = `WebRTC test failed: ${error.message}`;
+    return result;
+  }
+}
+
+/**
+ * Get user-friendly error message based on detection result
+ * @param {{supported: boolean, hasIceCandidates: boolean, error: string|null}} detection
+ * @returns {string}
+ */
+export function getWebRTCErrorMessage(detection) {
+  if (!detection.supported) {
+    return 'Your browser does not support WebRTC. Please use a modern browser like Chrome, Firefox, or Edge.';
+  }
+
+  if (!detection.hasIceCandidates) {
+    return 'WebRTC is blocked by your browser settings or extensions. P2P file transfer is disabled. Please check your privacy settings or try a different browser.';
+  }
+
+  if (detection.error) {
+    return `WebRTC error: ${detection.error}`;
+  }
+
+  return 'WebRTC is working correctly.';
+}
+
+/**
+ * Get suggestions to fix WebRTC issues
+ * @param {{supported: boolean, hasIceCandidates: boolean, error: string|null}} detection
+ * @returns {string[]}
+ */
+export function getWebRTCFixSuggestions(detection) {
+  if (!detection.supported) {
+    return [
+      'Update your browser to the latest version',
+      'Try using Chrome, Firefox, or Edge',
+    ];
+  }
+
+  if (!detection.hasIceCandidates) {
+    return [
+      'Check browser privacy settings (e.g., Opera: Settings → Privacy → WebRTC)',
+      'Disable VPN extensions that block WebRTC',
+      'Try using Chrome or Firefox with default settings',
+      'Use incognito/private mode to test without extensions',
+    ];
+  }
+
+  return [];
+}