@sanctum-key/react-native-sdk 1.0.19 → 1.0.21

package/src/components/KYCElements/IDCardCapture.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'; 
+import React, { useEffect, useMemo, useState } from 'react';
 import { View, Text, StyleSheet, Image, ScrollView, Platform, ActivityIndicator, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { showAlert } from '../../utils/platformAlert';
 import { EnhancedCameraView } from '../EnhancedCameraView';
@@ -13,565 +13,622 @@ import { getDocumentTypeInfo } from '../../utils/get-document-type-info';
 import pathToBase64 from '../../utils/pathToBase64';
 import { cropByObb, cropImageWithBBoxWithTolerance, getObbConfidence, OBB_CONFIDENCE_THRESHOLD } from '../../utils/cropByObb';
 import REGION_MAPPING from '../../config/region_mapping.json';
-import QRCode from 'react-native-qrcode-svg'; 
+import QRCode from 'react-native-qrcode-svg';
 
-const ISO_TO_COUNTRY_NAME: Record<string, string> = { 'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada', 'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain', 'CI': 'Ivory Coast', 'SN': 'Senegal', 'TG': 'Togo', 'ML': 'Mali' }; 
+const ISO_TO_COUNTRY_NAME: Record<string, string> = { 'KE': 'Kenya', 'CM': 'Cameroon', 'NG': 'Nigeria', 'CA': 'Canada', 'FR': 'France', 'GH': 'Ghana', 'ZA': 'South Africa', 'GB': 'Britain', 'CI': 'Ivory Coast', 'SN': 'Senegal', 'TG': 'Togo', 'ML': 'Mali' };
 
 interface IIDCardPayload { dir: string; file: string; mrz: string; templatePath?: string; }
-interface IDCardCaptureProps { component: TemplateComponent; value?: Record<string, IIDCardPayload>; onValueChange: (value: Record<string, IIDCardPayload | string>) => void; error?: string; language?: string; currentSide?: string; } 
-
-export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value = {}, onValueChange, error, language = 'en' }) => { 
-  const { t, locale } = useI18n(); 
-  const [showCamera, setShowCamera] = useState(false); 
-  const [capturedImages, setCapturedImages] = useState<Record<string, IIDCardPayload>>(value || {}); 
-  const [currentSide, setCurrentSide] = useState<'front' | 'back'>('front'); 
-  const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({}); 
-  const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false }); 
-  const [isProcessingCapture, setIsProcessingCapture] = useState(false); 
-  const [processingImagePath, setProcessingImagePath] = useState<string | null>(null); 
-  const [cameraKey, setCameraKey] = useState(0); 
-  const [isRebootingCamera, setIsRebootingCamera] = useState(false); 
-  const [cameraType, setCameraType] = useState<'back' | 'front'>('back'); 
-  const [showQRModal, setShowQRModal] = useState(false); 
+interface IDCardCaptureProps {
+  component: TemplateComponent;
+  value?: Record<string, IIDCardPayload>;
+  onValueChange: (value: Record<string, IIDCardPayload | string>) => void;
+  error?: string;
+  language?: string;
+  currentSide?: string;
+}
+
+export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value = {}, onValueChange, error, language = 'en' }) => {
+  const { t, locale } = useI18n();
+  const [showCamera, setShowCamera] = useState(false);
+  const [capturedImages, setCapturedImages] = useState<Record<string, IIDCardPayload>>(value || {});
+  const [currentSide, setCurrentSide] = useState<'front' | 'back'>('front');
+  const [bboxBySide, setBboxBySide] = useState<Record<string, IBbox>>({});
+  const [silentCaptureResult, setSilentCaptureResult] = useState<ISilentCaptureResult>({ success: false, isAnalyzing: false });
+  const [isProcessingCapture, setIsProcessingCapture] = useState(false);
+  const [processingImagePath, setProcessingImagePath] = useState<string | null>(null);
+  const [cameraKey, setCameraKey] = useState(0);
+  const [isRebootingCamera, setIsRebootingCamera] = useState(false);
+  const [cameraType, setCameraType] = useState<'back' | 'front'>('back');
+  const [showQRModal, setShowQRModal] = useState(false);
+  const [currentUrl, setCurrentUrl] = useState('');
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.location) {
+      setCurrentUrl(window.location.href);
+    }
+  }, []);
+
+  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();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+
+  const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => {
+    if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) return text[currentSide][locale] || '';
+    return "";
+  };
+
+  const countrySelectionData = useMemo(() => {
+    const countrySelectionComponent = state.template.components.find(c => c.type === 'country_selection');
+    return countrySelectionComponent ? state.componentData[countrySelectionComponent.id] : null;
+  }, [state.template.components, state.componentData]);
+
+  const selectedDocumentType = useMemo<{ type: GovernmentDocumentType; region: string } | null>(() => {
+    if (!countrySelectionData?.documentType) return null;
+    const backendDocType = countrySelectionData.documentType;
+    const mappedType = documentTypeMapping[backendDocType] || backendDocType as GovernmentDocumentType;
+    return { type: mappedType, region: countrySelectionData.region || 'root' };
+  }, [countrySelectionData, documentTypeMapping]);
+
+  const countryData = useMemo(() => countrySelectionData, [countrySelectionData]);
+
+  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) {
+      if (JSON.stringify(value) !== JSON.stringify(capturedImages)) {
+        const updatedImages = value as Record<string, IIDCardPayload>;
+        setCapturedImages(updatedImages);
+        const currentImageData = updatedImages[currentSide];
+        if (currentImageData?.dir) {
+          setSilentCaptureResult(prev => ({
+            ...prev, path: currentImageData.dir, success: true, isAnalyzing: false, mrz: currentImageData.mrz || '', templatePath: currentImageData.templatePath || '',
+          }));
+        }
+      }
+    }
+  }, [value, currentSide]);
+
+  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>);
+    const isLandscape = screenWidth > screenHeight;
+    let xMin, xMax, yMin, yMax;
+
+    if (Platform.OS === 'web') {
+      const boxWidthPercent = isLandscape ? 0.40 : 0.85;
+      xMin = isLandscape ? 30 : 7.5;
+      xMax = xMin + (boxWidthPercent * 100);
+      const containerWidth = Math.min(screenWidth * 0.95, 1000);
+      const containerHeight = isLandscape ? screenHeight * 0.80 : screenHeight * 0.90;
+      const boxPixelWidth = containerWidth * boxWidthPercent;
+      const boxPixelHeight = boxPixelWidth / 1.59;
+      const heightPercent = (boxPixelHeight / containerHeight) * 100;
+      yMin = (100 - heightPercent) / 2.5;
+      yMax = yMin + heightPercent;
+    } else {
+      xMin = 5; xMax = 95; yMin = 34; yMax = 66;
+    }
+    const platformBbox = { xMin, yMin, xMax, yMax, borderColor: '#2DBD60', borderWidth: Platform.OS === 'web' ? 2 : 3, cornerRadius: 8 };
+    return {
+      cameraType: Platform.OS === 'web' ? cameraType : 'back',
+      flashMode: 'auto' as const,
+      overlay: { guideText: instructions, bbox: platformBbox }
+    };
+  }, [selectedDocumentType, locale, component.instructions, cameraType, screenWidth, screenHeight]);
+
+  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); }
+  };
+
+  const getCurrentSideVerification = (currentSide: string, countryKey: string) => {
+    const rawDocType = countrySelectionData?.documentType;
+    if (!rawDocType || !countryKey) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
+    const rawCountryName = ISO_TO_COUNTRY_NAME[countryData?.code || ''] || countryData?.code || countryKey;
+    const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING;
+    let countryMapping = baseMapping[rawCountryName];
+    if (!countryMapping) {
+      const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase() || k.toLowerCase() === countryKey.toLowerCase());
+      if (foundKey) countryMapping = baseMapping[foundKey];
+    }
+    if (!countryMapping) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
+    const regionMapping = countryMapping[rawDocType];
+    if (!regionMapping) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; }
+    const authMethod: string[] = [];
+    const mrzTypes: string[] = [];
+    const key = countrySelectionData.region?.trim()?.length > 0 ? countrySelectionData.region.trim() : 'root';
+    if (regionMapping?.[key] && Array.isArray(regionMapping[key])) {
+      regionMapping[key].forEach((item: any) => {
+        if (item[currentSide]) {
+          authMethod.push(item[currentSide]);
+          if (item?.mrz_type) mrzTypes.push(item?.mrz_type);
+        }
+      });
+    }
+    return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping, key };
+  }
+
+  const getCorrespondingMrzType = (templatePath: string, mapping: any, selectedDocumentType: string = "root") => {
+    if (!mapping || !mapping[selectedDocumentType]) return null;
+    const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
+    if (!fileName) return null;
+    const pyName = `${fileName}.py`;
+    const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
+    return found?.mrz_type || null;
+  }
+
+  const getCorrespondingAuthMethod = (templatePath: string, mapping: any, selectedDocumentType: string = "root", side: 'front' | 'back') => {
+    if (!mapping || !mapping[selectedDocumentType]) return null;
+    const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", "");
+    if (!fileName) return null;
+    const pyName = `${fileName}.py`;
+    const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName);
+    return found?.[side] || null;
+  }
+
+  const autoCapture = async (capturePath: string, verified: ISilentCaptureResult & { region?: string }) => {
+    if (isProcessingCapture) return;
+    setIsProcessingCapture(true);
+    setProcessingImagePath(capturePath);
+    try {
+      let imagePathForUpload = capturePath;
+      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 {
+        imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.06);
+      } catch (e) {
+        console.warn("Crop failed, falling back to original image", e);
+        imagePathForUpload = capturePath;
+      }
+      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,
+          country: verified.country,
+          documentType: GovernmentDocumentTypeBackend[verified.documentType as keyof typeof GovernmentDocumentTypeBackend] || '',
+          ...(verified.region ? { region: verified.region } : {}) 
+        });
+      }
+
+      setTimeout(() => {
+        setShowCamera(false);
+        actions.showCustomStepper(true);
+        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false }));
+        setIsProcessingCapture(false);
+        setProcessingImagePath(null);
+      }, 600);
+    } catch (e: any) {
+      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);
+    }
+  };
+
+  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => {
+    if (silentCaptureResult.isAnalyzing || isProcessingCapture) return;
+    
+    if (result.success && result.path) {
+      setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' }));
+      let templatePath = capturedImages[currentSide]?.templatePath || '';
+      let templateBbox: IBbox | undefined;
+      let templateResponse: any;
       
-  const [currentUrl, setCurrentUrl] = useState(''); 
-  useEffect(() => { 
-    if (typeof window !== 'undefined' && window.location) { 
-      setCurrentUrl(window.location.href); 
-    } 
-  }, []); 
-
-  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(); 
-  const { width: screenWidth, height: screenHeight } = useWindowDimensions(); 
-
-  const getLocalizedText = (text: LocalizedText | Record<string, LocalizedText>): string => { 
-    if (text && typeof text[currentSide] === 'object' && text[currentSide][locale]) return text[currentSide][locale] || ''; 
-    return ""; 
-  }; 
-
-  const countrySelectionData = useMemo(() => { 
-    const countrySelectionComponent = state.template.components.find(c => c.type === 'country_selection'); 
-    return countrySelectionComponent ? state.componentData[countrySelectionComponent.id] : null; 
-  }, [state.template.components, state.componentData]); 
-
-  const selectedDocumentType = useMemo<{ type: GovernmentDocumentType; region: string } | null>(() => { 
-    if (!countrySelectionData?.documentType) return null; 
-    const backendDocType = countrySelectionData.documentType; 
-    const mappedType = documentTypeMapping[backendDocType] || backendDocType as GovernmentDocumentType; 
-    return { type: mappedType, region: countrySelectionData.region || 'root' }; 
-  }, [countrySelectionData, documentTypeMapping]); 
-
-  const countryData = useMemo(() => countrySelectionData, [countrySelectionData]); 
-
-  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) { 
-      if (JSON.stringify(value) !== JSON.stringify(capturedImages)) { 
-        const updatedImages = value as Record<string, IIDCardPayload>; 
-        setCapturedImages(updatedImages); 
-        const currentImageData = updatedImages[currentSide]; 
-        if (currentImageData?.dir) { 
-          setSilentCaptureResult(prev => ({ 
-            ...prev, path: currentImageData.dir, success: true, isAnalyzing: false, mrz: currentImageData.mrz || '', templatePath: currentImageData.templatePath || '', 
-          })); 
-        } 
-      } 
-    } 
-  }, [value, currentSide]); 
-
-  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>); 
+      if (!selectedDocumentType) {
+        setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Document type not selected' }));
+        return;
+      }
+
+      const issuingSubdivision = selectedDocumentType.region !== 'root' ? selectedDocumentType.region : undefined;
+
+      try {
+        if (!templatePath) {
+          const templateType = await checkTemplateType({ 
+            path: result.path || '', 
+            docType: selectedDocumentType?.type as GovernmentDocumentType, 
+            docRegion: countryData?.code || "", 
+            postfix: currentSide,
+            issuingSubdivision: issuingSubdivision 
+          }, env);
+
+          templateResponse = templateType;
+          if (templateType.template_path) templatePath = templateType.template_path;
           
-    const isLandscape = screenWidth > screenHeight; 
-    let xMin, xMax, yMin, yMax; 
+          if (templateType.card_obb) {
+            const obbConfidence = getObbConfidence((templateType as any).card_obb);
+            if (obbConfidence !== null && obbConfidence < OBB_CONFIDENCE_THRESHOLD) {
+              setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: t('kyc.idCardCapture.cardNotFullyInFrame') }));
+              return;
+            }
+            try {
+              const crop = await cropByObb(result.path, (templateType as any).card_obb);
+              templateBbox = crop.bbox;
+            } catch { }
+          }
+        }
 
-    if (Platform.OS === 'web') { 
-      // 🚨 UI FIX: Differentiate Desktop Web (Landscape) vs Mobile Web (Portrait)
-      const boxWidthPercent = isLandscape ? 0.40 : 0.85; 
-      
-      // On wide desktop, shift slightly right. On mobile portrait, center perfectly.
-      xMin = isLandscape ? 30 : 7.5; 
-      xMax = xMin + (boxWidthPercent * 100); 
-
-      // Safely calculate height to guarantee a 1.59 aspect ratio
-      const containerWidth = Math.min(screenWidth * 0.95, 1000); 
-      const containerHeight = isLandscape ? screenHeight * 0.80 : screenHeight * 0.90; 
-              
-      const boxPixelWidth = containerWidth * boxWidthPercent; 
-      const boxPixelHeight = boxPixelWidth / 1.59; 
-      const heightPercent = (boxPixelHeight / containerHeight) * 100; 
-
-      // Center vertically
-      yMin = (100 - heightPercent) / 2.5; 
-      yMax = yMin + heightPercent; 
-    } else { 
-      xMin = 5; xMax = 95; yMin = 34; yMax = 66; 
-    } 
-
-    const platformBbox = { xMin, yMin, xMax, yMax, borderColor: '#2DBD60', borderWidth: Platform.OS === 'web' ? 2 : 3, cornerRadius: 8 }; 
-
-    return { 
-      cameraType: Platform.OS === 'web' ? cameraType : 'back', 
-      flashMode: 'auto' as const, 
-      overlay: { guideText: instructions, bbox: platformBbox } 
-    }; 
-  }, [selectedDocumentType, locale, component.instructions, cameraType, screenWidth, screenHeight]); 
-
-  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); } 
-  }; 
-
-  const getCurrentSideVerification = (currentSide: string, countryKey: string) => { 
-    const rawDocType = countrySelectionData?.documentType; 
-    if (!rawDocType || !countryKey) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; } 
-    const rawCountryName = ISO_TO_COUNTRY_NAME[countryData?.code || ''] || countryData?.code || countryKey; 
-    const baseMapping = (REGION_MAPPING as any).regionMapping || REGION_MAPPING; 
-    let countryMapping = baseMapping[rawCountryName]; 
-    if (!countryMapping) { 
-      const foundKey = Object.keys(baseMapping).find(k => k.toLowerCase() === rawCountryName.toLowerCase() || k.toLowerCase() === countryKey.toLowerCase()); 
-      if (foundKey) countryMapping = baseMapping[foundKey]; 
-    } 
-    if (!countryMapping) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; } 
-    const regionMapping = countryMapping[rawDocType]; 
-    if (!regionMapping) { return { authMethod: [], mrzTypes: [], regionMapping: null, key: 'root' }; } 
-    const authMethod: string[] = []; 
-    const mrzTypes: string[] = []; 
-    const key = countrySelectionData.region?.trim()?.length > 0 ? countrySelectionData.region.trim() : 'root'; 
-    if (regionMapping?.[key] && Array.isArray(regionMapping[key])) { 
-      regionMapping[key].forEach((item: any) => { 
-        if (item[currentSide]) { 
-          authMethod.push(item[currentSide]); 
-          if (item?.mrz_type) mrzTypes.push(item?.mrz_type); 
-        } 
-      }); 
-    } 
-    return { authMethod: removeDuplicates(authMethod), mrzTypes: removeDuplicates(mrzTypes), regionMapping, key }; 
-  } 
-
-  const getCorrespondingMrzType = (templatePath: string, mapping: any, selectedDocumentType: string = "root") => { 
-    if (!mapping || !mapping[selectedDocumentType]) return null; 
-    const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", ""); 
-    if (!fileName) return null; 
-    const pyName = `${fileName}.py`; 
-    const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName); 
-    return found?.mrz_type || null; 
-  } 
-
-  const getCorrespondingAuthMethod = (templatePath: string, mapping: any, selectedDocumentType: string = "root", side: 'front' | 'back') => { 
-    if (!mapping || !mapping[selectedDocumentType]) return null; 
-    const fileName = templatePath.split("/").pop()?.replace(".jpg", "").replace(".png", ""); 
-    if (!fileName) return null; 
-    const pyName = `${fileName}.py`; 
-    const found = mapping[selectedDocumentType].find((item: any) => item.py_file === pyName); 
-    return found?.[side] || null; 
-  } 
-
-  const autoCapture = async (capturePath: string, verified: ISilentCaptureResult) => { 
-    if (isProcessingCapture) return; 
-    setIsProcessingCapture(true); 
-    setProcessingImagePath(capturePath); 
-    try { 
-      let imagePathForUpload = capturePath; 
-      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 { 
-        imagePathForUpload = await cropImageWithBBoxWithTolerance(capturePath, uiCropBbox, 0.06); 
-      } catch (e) { 
-        console.warn("Crop failed, falling back to original image", e); 
-        imagePathForUpload = capturePath; 
-      } 
-      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, 
-          country: verified.country, 
-          documentType: GovernmentDocumentTypeBackend[verified.documentType as keyof typeof GovernmentDocumentTypeBackend] || '', 
-        }); 
-      } 
-      setTimeout(() => { 
-        setShowCamera(false); 
-        actions.showCustomStepper(true); 
-        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false })); 
-        setIsProcessingCapture(false); 
-        setProcessingImagePath(null); 
-      }, 600); 
-    } catch (e: any) { 
-      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); 
-    } 
-  }; 
-
-  const handleSilentCapture = async (result: { success: boolean; path?: string; error?: string }) => { 
-    if (silentCaptureResult.isAnalyzing || isProcessingCapture) return; 
-    if (result.success && result.path) { 
-      setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: true, success: false, error: '' })); 
-      let templatePath = capturedImages[currentSide]?.templatePath || ''; 
-      let templateBbox: IBbox | undefined; 
-      let templateResponse: any; 
-      if (!selectedDocumentType) { 
-        setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: 'Document type not selected' })); 
-        return; 
-      } 
-      try { 
-        if (!templatePath) { 
-          const templateType = await checkTemplateType({ path: result.path || '', docType: selectedDocumentType?.type as GovernmentDocumentType, docRegion: countryData?.code || "", postfix: currentSide }, env); 
-          templateResponse = templateType; 
-          if (templateType.template_path) templatePath = templateType.template_path; 
-          if (templateType.card_obb) { 
-            const obbConfidence = getObbConfidence((templateType as any).card_obb); 
-            if (obbConfidence !== null && obbConfidence < OBB_CONFIDENCE_THRESHOLD) { 
-              setSilentCaptureResult((prev) => ({ ...prev, isAnalyzing: false, success: false, error: t('kyc.idCardCapture.cardNotFullyInFrame') })); 
-              return; 
-            } 
-            try { 
-              const crop = await cropByObb(result.path, (templateType as any).card_obb); 
-              templateBbox = crop.bbox; 
-            } catch { } 
-          } 
-        } 
-        const extractedCountryKey = templatePath ? templatePath.split('/')[0] : (ISO_TO_COUNTRY_NAME[countryData?.code || ''] || 'root'); 
-        const regionMappings = getCurrentSideVerification(currentSide, extractedCountryKey); 
-        let verificationRes: any; 
-        if (currentSide === 'front') { 
-          const matchedAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'front'); 
-          const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || 'TD1'; 
-          verificationRes = await frontVerification({ path: result.path, regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '', code: countryData?.code || '', currentSide, templatePath, mrzType }, env); 
-        } else { 
-          let matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back'); 
-          if (!matchedBackAuthMethod && currentSide === 'back') { matchedBackAuthMethod = 'MRZ'; } 
-          const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || ''; 
-          verificationRes = await backVerification({ path: result.path, regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '', code: countryData?.code || '', currentSide, templatePath, mrzType: backMrzType, templateResponse }, env); 
-        } 
-        const bbox = verificationRes?.bbox || templateBbox; 
-        const mrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : ""; 
-        const verifiedResult: ISilentCaptureResult = { path: result.path, templatePath, bbox, success: true, mrz, isAnalyzing: false, country: countryData?.code, documentType: selectedDocumentType.type }; 
-        setSilentCaptureResult(verifiedResult); 
-        if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox })); 
-        await autoCapture(result.path, verifiedResult); 
-      } catch (error: any) { 
-        console.log("Backend Verification Error:", error); 
-        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('card_not_fully_in_frame')) { 
-          userFriendlyMessage = 'Move closer to the document and ensure all corners are visible.'; 
-        } 
-        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: userFriendlyMessage })); 
-      } 
-    } 
-  }; 
-
-  const handleError = (event: { message: string }) => { 
-    showAlert('Erreur', event.message); 
-    setShowCamera(false); 
-    setIsProcessingCapture(false); 
-  }; 
-
-  useEffect(() => { 
-    actions.showCustomStepper(!showCamera); 
-  }, [showCamera]); 
-
-  if (!countrySelectionData || !selectedDocumentType) { 
-    return ( 
-      <View style={styles.root}> 
-        <View style={styles.previewContainer}> 
-          <Text style={styles.title}>{getLocalizedText(component.labels)}</Text> 
-          <Text style={styles.description}> 
-            {state.currentLanguage === "en" ? "Please complete the country and document selection first." : "Veuillez d'abord compléter la sélection du pays et du document."} 
-          </Text> 
-        </View> 
-      </View> 
-    ); 
-  } 
-
-  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> 
-      ); 
-    } 
-    return ( 
-      <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 style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}> 
-            {Platform.OS === 'web' && ( 
-              <View style={styles.webTopControls}> 
-                <TouchableOpacity style={styles.webFlipButton} onPress={toggleCameraLens}> 
-                  <Text style={styles.webFlipText}>🔄 Flip Lens</Text> 
-                </TouchableOpacity> 
-              </View> 
-            )} 
-                           
-            <EnhancedCameraView 
-              key={`${currentSide}-${cameraKey}`} 
-              showCamera={true} 
-              isProcessing={isBusy} 
-              cameraType={cameraConfig.cameraType} 
-              style={{ ...StyleSheet.absoluteFillObject, ...(Platform.OS === 'web' ? { width: '100%', height: '100%', left: 0, top: 0 } as any : {}) }} 
-              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> 
-            )} 
-                           
-            {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> 
-            )} 
-                           
-            {!isBusy && Platform.OS === 'web' ? ( 
-              <View style={styles.webBottomControlBar}> 
-                {silentCaptureResult.error && ( 
-                  <View style={styles.floatingErrorBanner}> 
-                    <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text> 
-                  </View> 
-                )} 
-                <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> 
-    ); 
-  } 
-
-  return ( 
-    <View style={styles.root}> 
-      <View style={styles.previewContainer}> 
-        <ScrollView style={styles.previewItemContainer} showsVerticalScrollIndicator={false}> 
-          <View key={currentSide} style={styles.sideContainer}> 
-            <Text style={styles.sideTitle}> 
-              {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })} 
-            </Text> 
-            <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 }}> 
-              <View style={styles.imagePreviewWrapper}> 
-                {capturedImages[currentSide]?.dir ? ( 
-                  <Image source={{ uri: capturedImages[currentSide].dir }} style={styles.previewImage} /> 
-                ) : silentCaptureResult.path ? ( 
-                  <Image source={{ uri: silentCaptureResult.path }} style={styles.previewImage} /> 
-                ) : null} 
-              </View> 
-              {!capturedImages[currentSide]?.dir && ( 
-                <View style={{ width: '100%', gap: 12 }}> 
-                  <Button 
-                    title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"} 
-                    onPress={() => { setShowCamera(true); refreshCamera(); actions.showCustomStepper(false); }} 
-                    variant="primary" size="large" fullWidth 
-                  /> 
-                  {Platform.OS === 'web' && ( 
-                    <Button 
-                      title={state.currentLanguage === "en" ? "Continue on Phone" : "Continuer sur le téléphone"} 
-                      onPress={() => setShowQRModal(true)} 
-                      variant="outline" size="large" fullWidth 
-                    /> 
-                  )} 
-                </View> 
-              )} 
-              {capturedImages[currentSide]?.dir && ( 
-                <> 
-                  <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => retakePicture(currentSide)} variant="outline" size="medium" fullWidth /> 
-                  <Button title={t('common.next')} onPress={() => { 
-                    if (!selectedDocumentType) { showAlert('Error', 'Document type not selected'); return; } 
-                    if (currentSide === 'back' || selectedDocumentType.type === 'passport') { 
-                      actions.nextComponent(); 
-                    } else { 
-                      setShowCamera(true); refreshCamera(); setCurrentSide('back'); setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined }); setIsProcessingCapture(false); setProcessingImagePath(null); 
-                    } 
-                  }} variant="primary" size="large" fullWidth /> 
-                </> 
-              )} 
-            </View> 
-          </View> 
-        </ScrollView> 
-      </View> 
-      {showQRModal && Platform.OS === 'web' && ( 
-        <View style={styles.qrModalOverlay}> 
-          <View style={styles.qrModalContainer}> 
-            <Text style={styles.qrModalTitle}> 
-              {state.currentLanguage === 'en' ? 'Scan to continue' : 'Scannez pour continuer'} 
-            </Text> 
-            <Text style={styles.qrModalText}> 
-              {state.currentLanguage === 'en' ? "Point your phone's camera at this QR code to seamlessly continue the process on your mobile device." : "Pointez l'appareil photo de votre téléphone vers ce code QR pour continuer le processus en toute fluidité sur votre appareil mobile."} 
-            </Text> 
-            <View style={styles.qrCodeWrapper}> 
-              <QRCode value={currentUrl} size={220} backgroundColor="transparent" /> 
-            </View> 
-            <Button title={state.currentLanguage === 'en' ? "Close" : "Fermer"} onPress={() => setShowQRModal(false)} variant="outline" fullWidth /> 
-          </View> 
-        </View> 
-      )} 
-    </View> 
-  ); 
-}; 
-
-const styles = StyleSheet.create({ 
-  root: { flex: 1, width: '100%', backgroundColor: 'transparent', alignSelf: 'center', ...Platform.select({ web: { minHeight: '85vh', justifyContent: 'center', alignItems: 'center' } as any, }) }, 
-  cameraWrapper: { width: '100%', backgroundColor: '#000000', overflow: 'hidden', ...Platform.select({ web: { maxWidth: 1000, width: '95%', height: '80vh', minHeight: 600, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.15, shadowRadius: 30, elevation: 24 } as any, default: { flex: 1 } }) }, 
-  // 🚨 UI FIX: flexWrap handles overflowing text perfectly on narrow mobile screens
-  headerContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, paddingHorizontal: 20, paddingVertical: 18, backgroundColor: '#FFFFFF', borderBottomWidth: 1, borderBottomColor: '#F1F5F9', zIndex: 10, ...Platform.select({ web: { display: 'flex' }, default: { display: 'none' } }) }, 
-  headerTitle: { fontSize: 18, fontWeight: '700', color: '#0F172A', flexShrink: 1 }, 
-  stepBadge: { backgroundColor: '#F1F5F9', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20, }, 
-  stepText: { fontSize: 13, fontWeight: '600', color: '#64748B', }, 
-  cameraFeedContainer: { flex: 1, position: 'relative', backgroundColor: '#000', }, 
-  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 }, 
-  webBottomControlBar: { position: 'absolute', bottom: 0, left: 0, right: 0, paddingHorizontal: 24, paddingBottom: 24, paddingTop: 30, backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 99999 }, 
-  webActionButtonsRow: { flexDirection: 'row', justifyContent: 'center', gap: 16, marginTop: 12, maxWidth: 500, alignSelf: 'center', width: '100%' }, 
-  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.15)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.3)', paddingVertical: 14, borderRadius: 12, alignItems: 'center' }, 
-  webSecondaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 }, 
-  webTopControls: { position: 'absolute', top: Platform.OS === 'ios' ? 70 : 20, right: 20, zIndex: 9999 }, 
-  webFlipButton: { backgroundColor: 'rgba(0,0,0,0.6)', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 20, borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', ...Platform.select({ web: { backdropFilter: 'blur(4px)' } as any }) }, 
-  webFlipText: { color: 'white', fontWeight: 'bold', fontSize: 14 }, 
-  previewContainer: { width: '100%', backgroundColor: 'white', borderRadius: 12, paddingVertical: 30, paddingHorizontal: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.08, shadowRadius: 16, elevation: 8, ...Platform.select({ web: { alignSelf: 'center', maxWidth: 650 }, 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: 22, fontWeight: 'bold', color: '#000', marginBottom: 12, textAlign: 'center' }, 
-  imagePreviewWrapper: { width: '100%', borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.12, shadowRadius: 8, elevation: 8, backgroundColor: '#f0f0f0', ...Platform.select({ web: { aspectRatio: 1.59, height: 'auto', maxWidth: 450, alignSelf: 'center' } as any, default: { height: 220 } }) }, 
-  previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'cover' }, 
-  floatingErrorBanner: { backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FCA5A5', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12, alignItems: 'center', justifyContent: 'center', width: '100%', ...Platform.select({ web: { position: 'absolute', bottom: '100%', marginBottom: 16, maxWidth: 500, alignSelf: 'center', zIndex: 100000, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' } as any, 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.7)', justifyContent: 'center', alignItems: 'center', zIndex: 9999, ...Platform.select({ web: { backdropFilter: 'blur(4px)' } as any }) }, 
-  processingText: { color: '#FFF', fontSize: 18, fontWeight: 'bold', marginTop: 16, textAlign: 'center' }, 
-  errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' }, 
-  // 🚨 UI FIX: Dropped the pill slightly lower so it never overlaps the flip lens button
-  topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 75, left: 0, right: 0, alignItems: 'center', zIndex: 100 }, 
-  topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.7)', paddingVertical: 10, paddingHorizontal: 20, borderRadius: 30, gap: 10, shadowColor: '#000', shadowOffset: {width: 0, height: 4}, shadowOpacity: 0.3, shadowRadius: 8 }, 
-  analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' }, 
-  qrModalOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center', zIndex: 999999, ...Platform.select({ web: { backdropFilter: 'blur(5px)' } as any }) }, 
-  qrModalContainer: { backgroundColor: '#FFFFFF', borderRadius: 24, padding: 32, width: '90%', maxWidth: 400, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.15, shadowRadius: 30, elevation: 24, }, 
-  qrModalTitle: { fontSize: 22, fontWeight: 'bold', color: '#0F172A', marginBottom: 12, textAlign: 'center' }, 
-  qrModalText: { fontSize: 15, color: '#64748B', textAlign: 'center', marginBottom: 24, lineHeight: 22, }, 
-  qrCodeWrapper: { padding: 16, backgroundColor: '#FFFFFF', borderRadius: 16, borderWidth: 1, borderColor: '#E2E8F0', marginBottom: 24, } 
+        const extractedCountryKey = templatePath ? templatePath.split('/')[0] : (ISO_TO_COUNTRY_NAME[countryData?.code || ''] || 'root');
+        const regionMappings = getCurrentSideVerification(currentSide, extractedCountryKey);
+        let verificationRes: any;
+
+        if (currentSide === 'front') {
+          const matchedAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'front');
+          const mrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || 'TD1';
+          
+          verificationRes = await frontVerification({ 
+            path: result.path, 
+            regionMapping: { authMethod: matchedAuthMethod ? [matchedAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, 
+            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType?.type as keyof typeof GovernmentDocumentTypeShorted] || '', 
+            code: countryData?.code || '', 
+            currentSide, 
+            templatePath, 
+            mrzType,
+            issuingSubdivision: issuingSubdivision 
+          }, env);
+        } else {
+          let matchedBackAuthMethod = getCorrespondingAuthMethod(templatePath, regionMappings.regionMapping, regionMappings.key || '', 'back');
+          if (!matchedBackAuthMethod && currentSide === 'back') { matchedBackAuthMethod = 'MRZ'; }
+          const backMrzType = getCorrespondingMrzType(templatePath, regionMappings.regionMapping, regionMappings.key || '') || '';
+          
+          // 🚨 EXTRACT FRONT TEMPLATE TO VALIDATE AGAINST BACK TEMPLATE
+          const frontTemplatePath = capturedImages['front']?.templatePath || '';
+
+          verificationRes = await backVerification({ 
+            path: result.path, 
+            regionMapping: { authMethod: matchedBackAuthMethod ? [matchedBackAuthMethod] : regionMappings.authMethod, mrzTypes: regionMappings.mrzTypes }, 
+            selectedDocumentType: GovernmentDocumentTypeShorted[selectedDocumentType.type as keyof typeof GovernmentDocumentTypeShorted] || '', 
+            code: countryData?.code || '', 
+            currentSide, 
+            templatePath, 
+            mrzType: backMrzType, 
+            templateResponse,
+            issuingSubdivision: issuingSubdivision,
+            frontTemplatePath: frontTemplatePath // 🚨 PASSED DOWN TO TRIGGER VALIDATION
+          }, env);
+        }
+
+        const bbox = verificationRes?.bbox || templateBbox;
+        const mrz = verificationRes?.mrz ? JSON.stringify(verificationRes.mrz) : "";
+        
+        const verifiedResult: ISilentCaptureResult & { region?: string } = { 
+          path: result.path, 
+          templatePath, 
+          bbox, 
+          success: true, 
+          mrz, 
+          isAnalyzing: false, 
+          country: countryData?.code, 
+          documentType: selectedDocumentType.type,
+          region: issuingSubdivision 
+        };
+        
+        setSilentCaptureResult(verifiedResult);
+        if (bbox) setBboxBySide(prev => ({ ...prev, [currentSide]: bbox }));
+        
+        await autoCapture(result.path, verifiedResult);
+
+      } catch (error: any) {
+        console.log("Backend Verification Error:", error);
+        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('card_not_fully_in_frame')) {
+          userFriendlyMessage = 'Move closer to the document and ensure all corners are visible.';
+        } else if (rawMessage.includes('ne correspond pas au recto')) { // 🚨 New Security Error Handler
+          userFriendlyMessage = 'The back of the document does not match the front. You must scan the same ID.';
+        }
+        
+        setSilentCaptureResult(prev => ({ ...prev, isAnalyzing: false, success: false, error: userFriendlyMessage }));
+      }
+    }
+  };
+
+  const handleError = (event: { message: string }) => {
+    showAlert('Erreur', event.message);
+    setShowCamera(false);
+    setIsProcessingCapture(false);
+  };
+
+  useEffect(() => {
+    actions.showCustomStepper(!showCamera);
+  }, [showCamera]);
+
+  if (!countrySelectionData || !selectedDocumentType) {
+    return (
+      <View style={styles.root}>
+        <View style={styles.previewContainer}>
+          <Text style={styles.title}>{getLocalizedText(component.labels)}</Text>
+          <Text style={styles.description}>
+            {state.currentLanguage === "en" ? "Please complete the country and document selection first." : "Veuillez d'abord compléter la sélection du pays et du document."}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  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>
+      );
+    }
+    return (
+      <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 style={[styles.cameraFeedContainer, { flex: 1, backgroundColor: '#000' }]}>
+            {Platform.OS === 'web' && (
+              <View style={styles.webTopControls}>
+                <TouchableOpacity style={styles.webFlipButton} onPress={toggleCameraLens}>
+                  <Text style={styles.webFlipText}>🔄 Flip Lens</Text>
+                </TouchableOpacity>
+              </View>
+            )}
+            
+            <EnhancedCameraView
+              key={`${currentSide}-${cameraKey}`}
+              showCamera={true}
+              isProcessing={isBusy}
+              cameraType={cameraConfig.cameraType}
+              style={{ ...StyleSheet.absoluteFillObject, ...(Platform.OS === 'web' ? { width: '100%', height: '100%', left: 0, top: 0 } as any : {}) }}
+              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>
+            )}
+            
+            {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>
+            )}
+            
+            {!isBusy && Platform.OS === 'web' ? (
+              <View style={styles.webBottomControlBar}>
+                {silentCaptureResult.error && (
+                  <View style={styles.floatingErrorBanner}>
+                    <Text style={styles.floatingErrorText}>⚠️ {silentCaptureResult.error}</Text>
+                  </View>
+                )}
+                <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>
+    );
+  }
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.previewContainer}>
+        <ScrollView style={styles.previewItemContainer} showsVerticalScrollIndicator={false}>
+          <View key={currentSide} style={styles.sideContainer}>
+            <Text style={styles.sideTitle}>
+              {t('kyc.idCardCapture.captureTitle', { side: currentSide === 'front' ? locale === 'en' ? 'Front' : 'Recto' : locale === 'en' ? 'Back' : 'Verso' })}
+            </Text>
+            <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 }}>
+              <View style={styles.imagePreviewWrapper}>
+                {capturedImages[currentSide]?.dir ? (
+                  <Image source={{ uri: capturedImages[currentSide].dir }} style={styles.previewImage} />
+                ) : silentCaptureResult.path ? (
+                  <Image source={{ uri: silentCaptureResult.path }} style={styles.previewImage} />
+                ) : null}
+              </View>
+              {!capturedImages[currentSide]?.dir && (
+                <View style={{ width: '100%', gap: 12 }}>
+                  <Button
+                    title={state.currentLanguage === "en" ? "Start Scanning" : "Commencer la numérisation"}
+                    onPress={() => { setShowCamera(true); refreshCamera(); actions.showCustomStepper(false); }}
+                    variant="primary" size="large" fullWidth
+                  />
+                  {Platform.OS === 'web' && (
+                    <Button
+                      title={state.currentLanguage === "en" ? "Continue on Phone" : "Continuer sur le téléphone"}
+                      onPress={() => setShowQRModal(true)}
+                      variant="outline" size="large" fullWidth
+                    />
+                  )}
+                </View>
+              )}
+              {capturedImages[currentSide]?.dir && (
+                <>
+                  <Button title={t('kyc.idCardCapture.retakeButton')} onPress={() => retakePicture(currentSide)} variant="outline" size="medium" fullWidth />
+                  <Button title={t('common.next')} onPress={() => {
+                    if (!selectedDocumentType) { showAlert('Error', 'Document type not selected'); return; }
+                    if (currentSide === 'back' || selectedDocumentType.type === 'passport') {
+                      actions.nextComponent();
+                    } else {
+                      setShowCamera(true); refreshCamera(); setCurrentSide('back'); setSilentCaptureResult({ success: false, isAnalyzing: false, path: '', error: '', templatePath: undefined }); setIsProcessingCapture(false); setProcessingImagePath(null);
+                    }
+                  }} variant="primary" size="large" fullWidth />
+                </>
+              )}
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+      {showQRModal && Platform.OS === 'web' && (
+        <View style={styles.qrModalOverlay}>
+          <View style={styles.qrModalContainer}>
+            <Text style={styles.qrModalTitle}>
+              {state.currentLanguage === 'en' ? 'Scan to continue' : 'Scannez pour continuer'}
+            </Text>
+            <Text style={styles.qrModalText}>
+              {state.currentLanguage === 'en' ? "Point your phone's camera at this QR code to seamlessly continue the process on your mobile device." : "Pointez l'appareil photo de votre téléphone vers ce code QR pour continuer le processus en toute fluidité sur votre appareil mobile."}
+            </Text>
+            <View style={styles.qrCodeWrapper}>
+              <QRCode value={currentUrl} size={220} backgroundColor="transparent" />
+            </View>
+            <Button title={state.currentLanguage === 'en' ? "Close" : "Fermer"} onPress={() => setShowQRModal(false)} variant="outline" fullWidth />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: { flex: 1, width: '100%', backgroundColor: 'transparent', alignSelf: 'center', ...Platform.select({ web: { minHeight: '85vh', justifyContent: 'center', alignItems: 'center' } as any, }) },
+  cameraWrapper: { width: '100%', backgroundColor: '#000000', overflow: 'hidden', ...Platform.select({ web: { maxWidth: 1000, width: '95%', height: '80vh', minHeight: 600, borderRadius: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.15, shadowRadius: 30, elevation: 24 } as any, default: { flex: 1 } }) },
+  headerContainer: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, paddingHorizontal: 20, paddingVertical: 18, backgroundColor: '#FFFFFF', borderBottomWidth: 1, borderBottomColor: '#F1F5F9', zIndex: 10, ...Platform.select({ web: { display: 'flex' }, default: { display: 'none' } }) },
+  headerTitle: { fontSize: 18, fontWeight: '700', color: '#0F172A', flexShrink: 1 },
+  stepBadge: { backgroundColor: '#F1F5F9', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20, },
+  stepText: { fontSize: 13, fontWeight: '600', color: '#64748B', },
+  cameraFeedContainer: { flex: 1, position: 'relative', backgroundColor: '#000', },
+  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 },
+  webBottomControlBar: { position: 'absolute', bottom: 0, left: 0, right: 0, paddingHorizontal: 24, paddingBottom: 24, paddingTop: 30, backgroundColor: 'rgba(0,0,0,0.6)', zIndex: 99999 },
+  webActionButtonsRow: { flexDirection: 'row', justifyContent: 'center', gap: 16, marginTop: 12, maxWidth: 500, alignSelf: 'center', width: '100%' },
+  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.15)', borderWidth: 1, borderColor: 'rgba(255,255,255,0.3)', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
+  webSecondaryButtonText: { color: 'white', fontWeight: 'bold', fontSize: 16 },
+  webTopControls: { position: 'absolute', top: Platform.OS === 'ios' ? 70 : 20, right: 20, zIndex: 9999 },
+  webFlipButton: { backgroundColor: 'rgba(0,0,0,0.6)', paddingHorizontal: 16, paddingVertical: 10, borderRadius: 20, borderWidth: 1, borderColor: 'rgba(255,255,255,0.4)', ...Platform.select({ web: { backdropFilter: 'blur(4px)' } as any }) },
+  webFlipText: { color: 'white', fontWeight: 'bold', fontSize: 14 },
+  previewContainer: { width: '100%', backgroundColor: 'white', borderRadius: 12, paddingVertical: 30, paddingHorizontal: 24, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.08, shadowRadius: 16, elevation: 8, ...Platform.select({ web: { alignSelf: 'center', maxWidth: 650 }, 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: 22, fontWeight: 'bold', color: '#000', marginBottom: 12, textAlign: 'center' },
+  imagePreviewWrapper: { width: '100%', borderRadius: 12, padding: 1, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.12, shadowRadius: 8, elevation: 8, backgroundColor: '#f0f0f0', ...Platform.select({ web: { aspectRatio: 1.59, height: 'auto', maxWidth: 450, alignSelf: 'center' } as any, default: { height: 220 } }) },
+  previewImage: { width: '100%', height: '100%', borderRadius: 12, resizeMode: 'cover' },
+  floatingErrorBanner: { backgroundColor: '#FEF2F2', borderWidth: 1, borderColor: '#FCA5A5', paddingVertical: 12, paddingHorizontal: 16, borderRadius: 12, alignItems: 'center', justifyContent: 'center', width: '100%', ...Platform.select({ web: { position: 'absolute', bottom: '100%', marginBottom: 16, maxWidth: 500, alignSelf: 'center', zIndex: 100000, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' } as any, 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.7)', justifyContent: 'center', alignItems: 'center', zIndex: 9999, ...Platform.select({ web: { backdropFilter: 'blur(4px)' } as any }) },
+  processingText: { color: '#FFF', fontSize: 18, fontWeight: 'bold', marginTop: 16, textAlign: 'center' },
+  errorText: { color: '#dc2626', fontSize: 14, marginTop: 8, textAlign: 'center' },
+  topAnalyzingPillContainer: { position: 'absolute', top: Platform.OS === 'android' ? 60 : 75, left: 0, right: 0, alignItems: 'center', zIndex: 100 },
+  topAnalyzingPill: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.7)', paddingVertical: 10, paddingHorizontal: 20, borderRadius: 30, gap: 10, shadowColor: '#000', shadowOffset: {width: 0, height: 4}, shadowOpacity: 0.3, shadowRadius: 8 },
+  analyzingPillText: { color: 'white', fontSize: 14, fontWeight: 'bold' },
+  qrModalOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.6)', justifyContent: 'center', alignItems: 'center', zIndex: 999999, ...Platform.select({ web: { backdropFilter: 'blur(5px)' } as any }) },
+  qrModalContainer: { backgroundColor: '#FFFFFF', borderRadius: 24, padding: 32, width: '90%', maxWidth: 400, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 10 }, shadowOpacity: 0.15, shadowRadius: 30, elevation: 24, },
+  qrModalTitle: { fontSize: 22, fontWeight: 'bold', color: '#0F172A', marginBottom: 12, textAlign: 'center' },
+  qrModalText: { fontSize: 15, color: '#64748B', textAlign: 'center', marginBottom: 24, lineHeight: 22, },
+  qrCodeWrapper: { padding: 16, backgroundColor: '#FFFFFF', borderRadius: 16, borderWidth: 1, borderColor: '#E2E8F0', marginBottom: 24, }
 });