@sanctum-key/react-native-sdk 1.0.13 → 1.0.15

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity } from 'react-native'; // 🚨 Added TouchableOpacity
+import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
 import { TemplateComponent, LocalizedText, GovernmentDocumentType, ISilentCaptureResult, IBbox, GovernmentDocumentTypeShorted, GovernmentDocumentTypeBackend } from '../../types/KYC.types';
@@ -29,8 +29,10 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const [isProcessingCapture, setIsProcessingCapture] = useState(false);
   const [processingImagePath, setProcessingImagePath] = useState<string | null>(null);
   
-  // 🚨 ADDED: Key to force camera re-mount
   const [cameraKey, setCameraKey] = useState(0);
+  const [isRebootingCamera, setIsRebootingCamera] = useState(false);
+  // Web specific state
+  const [cameraType, setCameraType] = useState<'back' | 'front'>('back');
 
   const documentTypeMapping: Record<string, GovernmentDocumentType> = { 'nationalId': 'national_id', 'passport': 'passport', 'driversLicense': 'drivers_licence', 'residencePermit': 'permanent_residence', 'healthInsuranceCard': 'health_insurance_card', };
   const { actions, state, env } = useTemplateKYCFlowContext();
@@ -54,18 +56,18 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 
   const countryData = useMemo(() => countrySelectionData, [countrySelectionData]);
 
-  const [isRebootingCamera, setIsRebootingCamera] = useState(false);
-
   const refreshCamera = () => {
     setIsRebootingCamera(true);
-    
     setTimeout(() => {
       setCameraKey(prev => prev + 1);
       setIsRebootingCamera(false);
     }, 500);
   };
 
-  
+  const toggleCameraLens = () => {
+    setCameraType(prev => prev === 'back' ? 'front' : 'back');
+    refreshCamera();
+  };
 
   useEffect(() => {
     if (value && Object.keys(value).length > 0) {
@@ -85,16 +87,21 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   const cameraConfig = useMemo(() => {
     const instructions = selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).instructions.en : getDocumentTypeInfo(selectedDocumentType.type).instructions.fr) : getLocalizedText(component.instructions as Record<string, LocalizedText>);
     return {
-      cameraType: 'back' as const, flashMode: 'auto' as const,
-      overlay: { guideText: instructions, bbox: { xMin: 15, yMin: 20, xMax: 85, yMax: 70, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 } }
+      cameraType: Platform.OS === 'web' ? cameraType : 'back',
+      flashMode: 'auto' as const,
+      overlay: { 
+        guideText: instructions, 
+        bbox: { xMin: 5, yMin: 15, xMax: 95, yMax: 85, borderColor: '#2DBD60', borderWidth: 3, cornerRadius: 8 } 
+      }
     };
-  }, [selectedDocumentType, locale, component.instructions]);
+  }, [selectedDocumentType, locale, component.instructions, cameraType]);
 
   const retakePicture = (sideToRetake: 'front' | 'back') => {
     setIsProcessingCapture(false);
     setProcessingImagePath(null);
     setSilentCaptureResult({ path: '', success: false, isAnalyzing: false, error: '', templatePath: '', mrz: '', bbox: undefined });
     setShowCamera(true);
+    refreshCamera();
     actions.showCustomStepper(false);
     setCapturedImages((prev) => { const newState = { ...prev }; delete newState[sideToRetake]; return newState; });
     if (value) { const newValue = { ...value }; delete newValue[sideToRetake]; onValueChange(newValue); }
@@ -149,21 +156,36 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     if (isProcessingCapture) return;
     setIsProcessingCapture(true);
     setProcessingImagePath(capturePath);
+
     try {
       let imagePathForUpload = capturePath;
-      if (verified.bbox) {
-        try {
-          imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, verified.bbox, 0.15);
-        } catch {
-          imagePathForUpload = capturePath;
-        }
+      
+      // 🚨 THE FIX: Ignore the backend's broken absolute pixels. 
+      // Calculate the crop using the Green UI Frame percentages (0.0 to 1.0)
+      const overlayBbox = cameraConfig.overlay.bbox;
+      const uiCropBbox = {
+        minX: overlayBbox.xMin / 100,
+        minY: overlayBbox.yMin / 100,
+        width: (overlayBbox.xMax - overlayBbox.xMin) / 100,
+        height: (overlayBbox.yMax - overlayBbox.yMin) / 100,
+      };
+
+      try {
+        // Apply the crop using the UI percentages and a tight 2% tolerance
+        imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.02);
+      } catch (e) {
+        console.warn("Crop failed, falling back to original image", e);
+        imagePathForUpload = capturePath; // Fallback to raw image if crop fails
       }
+      
       const base64 = await pathToBase64(imagePathForUpload);
       const newImages = {
         ...capturedImages,
         [currentSide]: { dir: imagePathForUpload, file: base64, mrz: verified.mrz || "", templatePath: verified.templatePath },
       };
+      
       setCapturedImages(newImages);
+      
       if (verified.country && verified.documentType) {
         onValueChange({
           ...newImages,
@@ -171,6 +193,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
           documentType: GovernmentDocumentTypeBackend[verified.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
         });
       }
+      
       setTimeout(() => {
         setShowCamera(false);
         actions.showCustomStepper(true);
@@ -178,8 +201,11 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         setIsProcessingCapture(false);
         setProcessingImagePath(null);
       }, 600);
+      
     } catch (e: any) {
-      showAlert('Error', e?.message || 'Impossible de capturer la photo');
+      console.error("Backend Error:", e);
+      const friendlyError = state.currentLanguage === 'en' ? 'Unable to process document. Please try again.' : 'Impossible de traiter le document. Veuillez réessayer.';
+      showAlert('Error', friendlyError);
       setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false }));
       setIsProcessingCapture(false);
       setProcessingImagePath(null);
@@ -236,9 +262,29 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
         if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
         await autoCapture(result.path, verifiedResult);
       } catch (error: any) {
-        const isCardNotFullyInFrame = error?.message === 'CARD_NOT_FULLY_IN_FRAME' || error?.message?.includes('entirement');
-        const errorMessage = isCardNotFullyInFrame ? t('kyc.idCardCapture.cardNotFullyInFrame') : (error?.message || 'Erreur de détection');
-        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: errorMessage }));
+        // 1. Keep the technical log for your debugging console
+        console.error("Backend Verification Error:", error);
+        
+        // 2. Define a map of technical keywords to user-friendly messages
+        const rawMessage = (error?.message || '').toLowerCase();
+        
+        let userFriendlyMessage ='Verification failed. Please try again.';
+      
+        if (rawMessage.includes('impossible') || rawMessage.includes('unreadable')) {
+          userFriendlyMessage = 'Document unreadable. Please hold the camera steady in good light.';
+        } else if (rawMessage.includes('country mismatch') || rawMessage.includes('pays sélectionné')) {
+          userFriendlyMessage = 'The document does not match your selected country.';
+        } else if (rawMessage.includes('too far') || rawMessage.includes('card_not_fully_in_frame')) {
+          userFriendlyMessage = 'Move closer to the document and ensure all corners are visible.';
+        }
+      
+        // 3. Set ONLY the friendly message to the UI state
+        setSilentCaptureResult(prev => ({ 
+          ...prev, 
+          isAnalyzing: false, 
+          success: false, 
+          error: userFriendlyMessage 
+        }));
       }
     }
   };
@@ -266,134 +312,157 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
     );
   }
 
+  // --- CAMERA RENDER ---
+  if (showCamera) {
+    const isBusy = isProcessingCapture;
 
- // --- CAMERA RENDER ---
- if (showCamera) {
-  const isBusy = isProcessingCapture;
+    if (isRebootingCamera) {
+      return (
+        <View style={[styles.root, { justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }]}>
+          <ActivityIndicator size="large" color="#2DBD60" />
+          <Text style={{ color: 'white', marginTop: 20, fontSize: 16 }}>Initializing Camera...</Text>
+        </View>
+      );
+    }
 
-  if (isRebootingCamera) {
     return (
-      <View style={[styles.root, { justifyContent: 'center', alignItems: 'center', backgroundColor: '#000' }]}>
-        <ActivityIndicator size="large" color="#2DBD60" />
-        <Text style={{ color: 'white', marginTop: 20, fontSize: 16 }}>Initializing Camera...</Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.root}>
-      <View style={[styles.cameraWrapper, { flex: 1, minHeight: 400 }]}>
-        
-        <View style={styles.headerContainer}>
-          <Text style={styles.headerTitle}>
-            {selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : ''}
-          </Text>
-          <View style={styles.stepBadge}>
-            <Text style={styles.stepText}>
-              {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
+      <View style={styles.root}>
+        <View style={[styles.cameraWrapper, { flex: 1 }]}>
+          
+          <View style={styles.headerContainer}>
+            <Text style={styles.headerTitle}>
+              {selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : ''}
             </Text>
+            <View style={styles.stepBadge}>
+              <Text style={styles.stepText}>
+                {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
+              </Text>
+            </View>
           </View>
-        </View>
-        
-        <View style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}>
           
-          <EnhancedCameraView
-            key={`${currentSide}-${cameraKey}`}
-            showCamera={true}
-            isProcessing={isBusy}
-            cameraType={cameraConfig.cameraType}
-            style={styles.absoluteFillObject} 
-            onError={handleError}
-            onSilentCapture={handleSilentCapture}
-            silentCaptureResult={silentCaptureResult}
-            overlayComponent={
-              <>
-                 {/* We ONLY put the ID frame here, because if the camera fails, we don't care if the frame fails too */}
-                <IdCardOverlay
-                  xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax}
-                  instructions={cameraConfig.overlay.guideText}
-                  cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
-                  isSuccess={silentCaptureResult.success}
-                  language={state.currentLanguage}
-                  stepperProps={{
-                    back: () => {
-                      if (currentSide === 'back') {
-                        setCurrentSide('front');
-                        setShowCamera(false);
-                        setIsProcessingCapture(false);
-                        setProcessingImagePath(null);
-                        if (capturedImages['front']?.dir) {
-                          const frontImage = capturedImages['front'];
-                          setSilentCaptureResult((prev) => ({ ...prev, path: frontImage.dir, success: true, isAnalyzing: false, error: '', mrz: frontImage.mrz || '', templatePath: frontImage.templatePath || '', bbox: bboxBySide['front'] }));
-                        } else { setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '', templatePath: '' })); }
-                      } else { actions.previousComponent(); }
-                    },
-                    selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
-                    step: state.currentComponentIndex + 1, totalSteps: state.template.components.length, side: currentSide,
-                  }}
-                />
-              </>
-            }
-          />
-
-
-          {!isBusy && silentCaptureResult.isAnalyzing && (
-            <View style={styles.topAnalyzingPillContainer}>
-              <View style={styles.topAnalyzingPill}>
-                <ActivityIndicator size="small" color="white" />
-                <Text style={styles.analyzingPillText}>
-                  {state.currentLanguage === 'en' ? 'Scanning...' : 'Analyse...'}
-                </Text>
+          <View style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}>
+            
+            {/* WEB ONLY: Flip Camera Top Button */}
+            {Platform.OS === 'web' && (
+              <View style={styles.webTopControls}>
+                 <TouchableOpacity style={styles.webFlipButton} onPress={toggleCameraLens}>
+                    <Text style={styles.webFlipText}>🔄 Flip Lens</Text>
+                 </TouchableOpacity>
               </View>
-            </View>
-          )}
-
-          {isBusy && (
-            <View style={[StyleSheet.absoluteFillObject, { zIndex: 9999 }]}>
-              {processingImagePath && (
-                <Image
-                  source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }}
-                  style={StyleSheet.absoluteFillObject}
-                  resizeMode="cover"
-                />
-              )}
-              <View style={styles.processingOverlay}>
-                <ActivityIndicator size="large" color="#2DBD60" />
-                <Text style={styles.processingText}>
-                  {state.currentLanguage === 'en' ? 'Perfect!\nProcessing Document...' : 'Parfait!\nTraitement du document...'}
-                </Text>
+            )}
+
+            <EnhancedCameraView
+              key={`${currentSide}-${cameraKey}`}
+              showCamera={true}
+              isProcessing={isBusy}
+              cameraType={cameraConfig.cameraType}
+              style={StyleSheet.absoluteFillObject}
+              onError={handleError}
+              onSilentCapture={handleSilentCapture}
+              silentCaptureResult={silentCaptureResult}
+              overlayComponent={
+                <>
+                  <IdCardOverlay
+                    xMin={cameraConfig.overlay.bbox.xMin} yMin={cameraConfig.overlay.bbox.yMin} xMax={cameraConfig.overlay.bbox.xMax} yMax={cameraConfig.overlay.bbox.yMax}
+                    instructions={cameraConfig.overlay.guideText}
+                    cornerOpacity={cameraConfig.overlay.bbox.cornerRadius || 0 as number}
+                    isSuccess={silentCaptureResult.success}
+                    language={state.currentLanguage}
+                    stepperProps={{
+                      back: () => {
+                        if (currentSide === 'back') {
+                          setCurrentSide('front');
+                          setShowCamera(false);
+                          setIsProcessingCapture(false);
+                          setProcessingImagePath(null);
+                          if (capturedImages['front']?.dir) {
+                            const frontImage = capturedImages['front'];
+                            setSilentCaptureResult((prev) => ({ ...prev, path: frontImage.dir, success: true, isAnalyzing: false, error: '', mrz: frontImage.mrz || '', templatePath: frontImage.templatePath || '', bbox: bboxBySide['front'] }));
+                          } else { setSilentCaptureResult((prev) => ({ ...prev, path: '', success: false, isAnalyzing: false, error: '', templatePath: '' })); }
+                        } else { actions.previousComponent(); }
+                      },
+                      selectedDocumentType: selectedDocumentType ? (locale === 'en' ? getDocumentTypeInfo(selectedDocumentType.type).name.en : getDocumentTypeInfo(selectedDocumentType.type).name.fr) : '',
+                      step: state.currentComponentIndex + 1, totalSteps: state.template.components.length, side: currentSide,
+                    }}
+                  />
+                </>
+              }
+            />
+
+            {!isBusy && silentCaptureResult.isAnalyzing && (
+              <View style={styles.topAnalyzingPillContainer}>
+                <View style={styles.topAnalyzingPill}>
+                  <ActivityIndicator size="small" color="white" />
+                  <Text style={styles.analyzingPillText}>
+                    {state.currentLanguage === 'en' ? 'Scanning...' : 'Analyse...'}
+                  </Text>
+                </View>
               </View>
-            </View>
-          )}
-
-          {!isBusy && (
-             <View style={styles.escapeHatchContainer}>
-                {/* Refresh Button */}
-                <TouchableOpacity style={styles.fallbackRefreshButton} onPress={refreshCamera}>
-                  <Text style={styles.fallbackRefreshText}>↻ Refresh Camera</Text>
-                </TouchableOpacity>
-
-                <TouchableOpacity 
-                  style={[styles.fallbackRefreshButton, { marginTop: 15, backgroundColor: 'rgba(220, 38, 38, 0.8)', borderColor: '#DC2626' }]} 
-                  onPress={() => setShowCamera(false)}
-                >
-                  <Text style={styles.fallbackRefreshText}>Cancel / Go Back</Text>
-                </TouchableOpacity>
-             </View>
-          )}
-
-          {silentCaptureResult.error && !isBusy ? (
-            <View style={[styles.floatingErrorBanner, { zIndex: 10000 }]}>
-              <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
-            </View>
-          ) : null}
+            )}
+
+            {isBusy && (
+              <View style={[StyleSheet.absoluteFillObject, { zIndex: 9999 }]}>
+                {processingImagePath && (
+                  <Image
+                    source={{ uri: processingImagePath.startsWith('file://') ? processingImagePath : `file://${processingImagePath}` }}
+                    style={StyleSheet.absoluteFillObject}
+                    resizeMode="cover"
+                  />
+                )}
+                <View style={styles.processingOverlay}>
+                  <ActivityIndicator size="large" color="#2DBD60" />
+                  <Text style={styles.processingText}>
+                    {state.currentLanguage === 'en' ? 'Perfect!\nProcessing Document...' : 'Parfait!\nTraitement du document...'}
+                  </Text>
+                </View>
+              </View>
+            )}
+
+            {/* 🚨 THE ESCAPE HATCH: Branching UI for Web vs Mobile */}
+            {!isBusy && Platform.OS === 'web' ? (
+               <View style={styles.webBottomControlBar}>
+                  {silentCaptureResult.error ? (
+                    <View style={styles.floatingErrorBanner}>
+                      <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
+                    </View>
+                  ) : <View style={{ height: 10 }} />}
+
+                  <View style={styles.webActionButtonsRow}>
+                    <TouchableOpacity style={styles.webSecondaryButton} onPress={() => setShowCamera(false)}>
+                      <Text style={styles.webSecondaryButtonText}>Cancel</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity style={styles.webPrimaryButton} onPress={refreshCamera}>
+                      <Text style={styles.webPrimaryButtonText}>↻ Refresh Camera</Text>
+                    </TouchableOpacity>
+                  </View>
+               </View>
+            ) : !isBusy ? (
+               <View style={styles.escapeHatchContainer}>
+                  <TouchableOpacity style={styles.fallbackRefreshButton} onPress={refreshCamera}>
+                    <Text style={styles.fallbackRefreshText}>↻ Refresh Camera</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity 
+                    style={[styles.fallbackRefreshButton, { marginTop: 15, backgroundColor: 'rgba(220, 38, 38, 0.8)', borderColor: '#DC2626' }]} 
+                    onPress={() => setShowCamera(false)}
+                  >
+                    <Text style={styles.fallbackRefreshText}>Cancel / Go Back</Text>
+                  </TouchableOpacity>
+               </View>
+            ) : null}
+
+            {silentCaptureResult.error && !isBusy && Platform.OS !== 'web' ? (
+              <View style={[styles.floatingErrorBanner, { zIndex: 10000 }]}>
+                <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
+              </View>
+            ) : null}
 
+          </View>
         </View>
       </View>
-    </View>
-  );
-}
+    );
+  }
 
+  // --- PREVIEW RENDER ---
   return (
     <View style={styles.root}>
       <View style={styles.previewContainer}>
@@ -405,6 +474,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
             <Text style={{ fontSize: 14, color: '#666', textAlign: 'center', marginBottom: 16, lineHeight: 22 }}>
               {getLocalizedText(component.instructions)}
             </Text>
+            
             <View style={{ alignItems: 'center', justifyContent: 'center', flexDirection: "column", gap: 16 }}>
               {silentCaptureResult?.error === 'TOO_FAR_AWAY' && (
                 <View style={styles.warningBanner}>
@@ -413,6 +483,8 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                   </Text>
                 </View>
               )}
+              
+              {/* 🚨 PREVIEW CONTAINER WITH PLATFORM OVERRIDES */}
               <View style={styles.imagePreviewWrapper}>
                 {capturedImages[currentSide]?.dir ? (
                   <Image source={{ uri: capturedImages[currentSide].dir }} style={styles.previewImage} />
@@ -420,10 +492,11 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                   <Image source={{ uri: silentCaptureResult.path }} style={styles.previewImage} />
                 ) : null}
               </View>
+
               {!capturedImages[currentSide]?.dir && (
                 <Button
                   title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"}
-                  onPress={() => { setShowCamera(true); actions.showCustomStepper(false); }}
+                  onPress={() => { setShowCamera(true); refreshCamera(); actions.showCustomStepper(false); }}
                   variant="primary" size="large" fullWidth
                 />
               )}
@@ -436,6 +509,7 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
                       actions.nextComponent();
                     } else {
                       setShowCamera(true);
+                      refreshCamera();
                       setCurrentSide('back');
                       setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined });
                       setIsProcessingCapture(false);
@@ -455,38 +529,69 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
 const styles = StyleSheet.create({
   root: {
     flex: 1, width: '100%', backgroundColor: 'transparent', alignSelf: 'center',
-    ...(Platform.OS === 'web' ? ({ minHeight: '85vh', justifyContent: 'center', alignItems: 'center', backdropFilter: 'blur(8px)' } as any) : {})
+    ...Platform.select({
+      web: { minHeight: '85vh', justifyContent: 'center', alignItems: 'center', backdropFilter: 'blur(8px)' } as any,
+    })
   },
   cameraWrapper: {
-    width: '100%', backgroundColor: '#FFFFFF', overflow: 'hidden',
-    ...(Platform.OS === 'web' ? ({ maxWidth: 500, height: 700, maxHeight: '90vh', borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 20 }, shadowOpacity: 0.25, shadowRadius: 35, elevation: 24, } as any) : { flex: 1, })
+    width: '100%', backgroundColor: '#000000', overflow: 'hidden',
+    ...Platform.select({
+      web: { maxWidth: 550, height: '80vh', minHeight: 600, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 20 }, shadowOpacity: 0.25, shadowRadius: 35, elevation: 24 } as any,
+      default: { flex: 1 }
+    })
   },
   headerContainer: {
     flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 24, paddingVertical: 18, backgroundColor: '#FFFFFF', borderBottomWidth: 1, borderBottomColor: '#F1F5F9', zIndex: 10,
-    ...(Platform.OS !== 'web' ? { display: 'none' } : {})
+    ...Platform.select({ web: { display: 'flex' }, default: { display: 'none' } })
   },
   headerTitle: { fontSize: 18, fontWeight: '700', color: '#0F172A', },
   stepBadge: { backgroundColor: '#F1F5F9', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20, },
   stepText: { fontSize: 13, fontWeight: '600', color: '#64748B', },
   cameraFeedContainer: { flex: 1, position: 'relative', backgroundColor: '#000', },
   camera: { flex: 1, },
-  refreshButton: {
-    position: 'absolute', bottom: 100, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0.6)', paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, zIndex: 500
-  },
-  refreshButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+
+  // MOBILE: Escape Hatch layout
+  escapeHatchContainer: { position: 'absolute', bottom: 40, left: 0, right: 0, alignItems: 'center', justifyContent: 'center', zIndex: 99999 },
+  fallbackRefreshButton: { backgroundColor: 'rgba(0, 0, 0, 0.8)', borderWidth: 1, borderColor: 'rgba(255, 255, 255, 0.5)', paddingVertical: 12, paddingHorizontal: 24, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.3, shadowRadius: 5, elevation: 8 },
+  fallbackRefreshText: { color: '#FFFFFF', fontWeight: 'bold', fontSize: 16 },
+
+  // WEB: Control Bar layout
+  webBottomControlBar: { position: 'absolute', bottom: 0, left: 0, right: 0, paddingHorizontal: 20, paddingBottom: 20, paddingTop: 20, backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 99999 },
+  webActionButtonsRow: { flexDirection: 'row', justifyContent: 'space-between', gap: 12, marginTop: 12 },
+  webPrimaryButton: { flex: 1, backgroundColor: '#2DBD60', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
+  webPrimaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+  webSecondaryButton: { flex: 1, backgroundColor: 'rgba(255,255,255,0.2)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
+  webSecondaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+  
+  // WEB: Flip Controls
+  webTopControls: { position: 'absolute', top: 20, right: 20, zIndex: 9999 },
+  webFlipButton: { backgroundColor: 'rgba(0,0,0,0.5)', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 20, borderWidth: 1, borderColor: 'rgba(255,255,255,0.3)' },
+  webFlipText: { color: 'white', fontWeight: 'bold', fontSize: 14 },
+
   previewContainer: {
     width: '100%', backgroundColor: 'white', borderRadius: 12, paddingVertical: 24, paddingHorizontal: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 12, elevation: 8,
-    ...(Platform.OS === 'web' ? { alignSelf: 'center', maxWidth: 600 } : { margin: 10, width: '95%' })
+    ...Platform.select({ web: { alignSelf: 'center', maxWidth: 600 }, default: { margin: 10, width: '95%' }})
   },
   previewItemContainer: { flexGrow: 1, },
   title: { fontSize: 24, fontWeight: 'bold', color: '#333', marginBottom: 8, textAlign: 'center' },
   description: { fontSize: 16, color: '#666', textAlign: 'center', marginBottom: 24, lineHeight: 22 },
   sideContainer: { marginBottom: 24 },
   sideTitle: { fontSize: 25, fontWeight: 'bold', color: '#000', marginBottom: 12, textAlign: 'center' },
-  imagePreviewWrapper: { width: '100%', height: 220, borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 8, backgroundColor: '#f0f0f0' },
+  
+  imagePreviewWrapper: { 
+    width: '100%', borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 8, backgroundColor: '#f0f0f0',
+    ...Platform.select({
+      web: { aspectRatio: 1.59, height: 'auto' } as any, // 🚨 Perfect ID ratio on web
+      default: { height: 220 } // 🚨 Strict original height on mobile
+    })
+  },
   previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'cover' },
+
   floatingErrorBanner: {
-    position: 'absolute', bottom: 30, left: 24, right: 24, backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FCA5A5', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12, alignItems: 'center', justifyContent: 'center', shadowColor: '#DC2626', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.1, shadowRadius: 8, elevation: 8, zIndex: 100
+    backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FCA5A5', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12, alignItems: 'center', justifyContent: 'center', width: '100%',
+    ...Platform.select({ 
+      default: { position: 'absolute', top: Platform.OS === 'ios' ? 90 : 70, left: 24, right: 24, zIndex: 10000 } 
+    })
   },
   floatingErrorText: { color: '#991B1B', fontSize: 14, fontWeight: '700', textAlign: 'center' },
   processingOverlay: { flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.6)', justifyContent: 'center', alignItems: 'center', zIndex: 9999 },
@@ -496,39 +601,5 @@ const styles = StyleSheet.create({
   errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
   topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 50, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
   topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.6)', paddingVertical: 8, paddingHorizontal: 16, borderRadius: 20, gap: 8 },
-  analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' },
-  escapeHatchContainer: {
-    position: 'absolute',
-    bottom: 40,
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 99999, // Guarantees it is the top-most element
-  },
-  fallbackRefreshButton: {
-    backgroundColor: 'rgba(0, 0, 0, 0.8)', // Darker so it's visible on white or black
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.5)',
-    paddingVertical: 12,
-    paddingHorizontal: 24,
-    borderRadius: 24,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 5,
-    elevation: 8,
-  },
-  fallbackRefreshText: {
-    color: '#FFFFFF',
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-  absoluteFillObject: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
+  analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' }
 });