
                // Enhanced Copy Button with better UX
                const EnhancedCopyButton = ({ text, className = "", children }) => {
                    const [copied, setCopied] = React.useState(false);
        
                    const handleCopy = async () => {
                        try {
                            await navigator.clipboard.writeText(text);
                            setCopied(true);
                            setTimeout(() => setCopied(false), 2000);
                        } catch (error) {
                            console.error('Copy failed:', error);
                            // Fallback for older browsers
                            const textArea = document.createElement('textarea');
                            textArea.value = text;
                            document.body.appendChild(textArea);
                            textArea.select();
                            document.execCommand('copy');
                            document.body.removeChild(textArea);
                            setCopied(true);
                            setTimeout(() => setCopied(false), 2000);
                        }
                    };
        
                    return React.createElement('button', {
                        onClick: handleCopy,
                        className: `${className} transition-all duration-200`
                    }, [
                        React.createElement('i', {
                            key: 'icon',
                            className: `${copied ? 'fas fa-check accent-green' : 'fas fa-copy text-secondary'} mr-2`
                        }),
                        copied ? 'Copied!' : children
                    ]);
                };
        
                // Verification Component
                const VerificationStep = ({ verificationCode, onConfirm, onReject, localConfirmed, remoteConfirmed, bothConfirmed }) => {
                    return React.createElement('div', {
                        className: "card-minimal rounded-xl p-6 border-purple-500/20"
                    }, [
                        React.createElement('div', {
                            key: 'header',
                            className: "flex items-center mb-4"
                        }, [
                            React.createElement('div', {
                                key: 'icon',
                                className: "w-10 h-10 bg-purple-500/10 border border-purple-500/20 rounded-lg flex items-center justify-center mr-3"
                            }, [
                                React.createElement('i', {
                                    className: 'fas fa-shield-alt accent-purple'
                                })
                            ]),
                            React.createElement('h3', {
                                key: 'title',
                                className: "text-lg font-medium text-primary"
                            }, "Security verification")
                        ]),
                        React.createElement('div', {
                            key: 'content',
                            className: "space-y-4"
                        }, [
                            React.createElement('p', {
                                key: 'description',
                                className: "text-secondary text-sm"
                            }, "Verify the security code with your contact via another communication channel (voice, SMS, etc.):"),
                            React.createElement('div', {
                                key: 'code-display',
                                className: "text-center"
                            }, [
                                React.createElement('div', {
                                    key: 'code',
                                    className: "verification-code text-2xl py-4"
                                }, verificationCode)
                            ]),
                            // Verification status indicators
                            React.createElement('div', {
                                key: 'verification-status',
                                className: "space-y-2"
                            }, [
                                React.createElement('div', {
                                    key: 'local-status',
                                    className: `flex items-center justify-between p-2 rounded-lg ${localConfirmed ? 'bg-green-500/10 border border-green-500/20' : 'bg-gray-500/10 border border-gray-500/20'}`
                                }, [
                                    React.createElement('span', {
                                        key: 'local-label',
                                        className: "text-sm text-secondary"
                                    }, "Your confirmation:"),
                                    React.createElement('div', {
                                        key: 'local-indicator',
                                        className: "flex items-center"
                                    }, [
                                        React.createElement('i', {
                                            key: 'local-icon',
                                            className: `fas ${localConfirmed ? 'fa-check-circle text-green-400' : 'fa-clock text-gray-400'} mr-2`
                                        }),
                                        React.createElement('span', {
                                            key: 'local-text',
                                            className: `text-sm ${localConfirmed ? 'text-green-400' : 'text-gray-400'}`
                                        }, localConfirmed ? 'Confirmed' : 'Pending')
                                    ])
                                ]),
                                React.createElement('div', {
                                    key: 'remote-status',
                                    className: `flex items-center justify-between p-2 rounded-lg ${remoteConfirmed ? 'bg-green-500/10 border border-green-500/20' : 'bg-gray-500/10 border border-gray-500/20'}`
                                }, [
                                    React.createElement('span', {
                                        key: 'remote-label',
                                        className: "text-sm text-secondary"
                                    }, "Peer confirmation:"),
                                    React.createElement('div', {
                                        key: 'remote-indicator',
                                        className: "flex items-center"
                                    }, [
                                        React.createElement('i', {
                                            key: 'remote-icon',
                                            className: `fas ${remoteConfirmed ? 'fa-check-circle text-green-400' : 'fa-clock text-gray-400'} mr-2`
                                        }),
                                        React.createElement('span', {
                                            key: 'remote-text',
                                            className: `text-sm ${remoteConfirmed ? 'text-green-400' : 'text-gray-400'}`
                                        }, remoteConfirmed ? 'Confirmed' : 'Pending')
                                    ])
                                ])
                            ]),
                            React.createElement('div', {
                                key: 'warning',
                                className: "p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg"
                            }, [
                                React.createElement('p', {
                                    className: "text-yellow-400 text-sm flex items-center"
                                }, [
                                    React.createElement('i', {
                                        className: 'fas fa-exclamation-triangle mr-2'
                                    }),
                                    'Make sure the codes match exactly.!'
                                ])
                            ]),
                            React.createElement('div', {
                                key: 'buttons',
                                className: "flex space-x-3"
                            }, [
                                React.createElement('button', {
                                    key: 'confirm',
                                    onClick: onConfirm,
                                    disabled: localConfirmed,
                                    className: `flex-1 py-3 px-4 rounded-lg font-medium transition-all duration-200 ${localConfirmed ? 'bg-gray-500/20 text-gray-400 cursor-not-allowed' : 'btn-verify text-white'}`
                                }, [
                                    React.createElement('i', {
                                        className: `fas ${localConfirmed ? 'fa-check-circle' : 'fa-check'} mr-2`
                                    }),
                                    localConfirmed ? 'Confirmed' : 'The codes match'
                                ]),
                                React.createElement('button', {
                                    key: 'reject',
                                    onClick: onReject,
                                    className: "flex-1 bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20 py-3 px-4 rounded-lg font-medium transition-all duration-200"
                                }, [
                                    React.createElement('i', {
                                        className: 'fas fa-times mr-2'
                                    }),
                                    'The codes do not match'
                                ])
                            ])
                        ])
                    ]);
                };
        
                // Enhanced Chat Message with better security indicators
                const EnhancedChatMessage = ({ message, type, timestamp }) => {
                    const formatTime = (ts) => {
                        return new Date(ts).toLocaleTimeString('ru-RU', { 
                            hour: '2-digit', 
                            minute: '2-digit',
                            second: '2-digit'
                        });
                    };
        
                    const getMessageStyle = () => {
                        switch (type) {
                            case 'sent':
                                return {
                                    container: "ml-auto bg-orange-500/15 border-orange-500/20 text-primary",
                                    icon: "fas fa-lock accent-orange",
                                    label: "Encrypted"
                                };
                            case 'received':
                                return {
                                    container: "mr-auto card-minimal text-primary",
                                    icon: "fas fa-unlock-alt accent-green",
                                    label: "Decrypted"
                                };
                            case 'system':
                                return {
                                    container: "mx-auto bg-yellow-500/10 border border-yellow-500/20 text-yellow-400",
                                    icon: "fas fa-info-circle accent-yellow",
                                    label: "System"
                                };
                            default:
                                return {
                                    container: "mx-auto card-minimal text-secondary",
                                    icon: "fas fa-circle text-muted",
                                    label: "Unknown"
                                };
                        }
                    };
        
                    const style = getMessageStyle();
        
                    return React.createElement('div', {
                        className: `message-slide mb-3 p-3 rounded-lg max-w-md break-words ${style.container} border`
                    }, [
                        React.createElement('div', {
                            key: 'content',
                            className: "flex items-start space-x-2"
                        }, [
                            React.createElement('i', {
                                key: 'icon',
                                className: `${style.icon} text-sm mt-0.5 opacity-70`
                            }),
                            React.createElement('div', {
                                key: 'text',
                                className: "flex-1"
                            }, [
                                React.createElement('div', {
                                    key: 'message',
                                    className: "text-sm"
                                }, message),
                                timestamp && React.createElement('div', {
                                    key: 'meta',
                                    className: "flex items-center justify-between mt-1 text-xs opacity-50"
                                }, [
                                    React.createElement('span', {
                                        key: 'time'
                                    }, formatTime(timestamp)),
                                    React.createElement('span', {
                                        key: 'status',
                                        className: "text-xs"
                                    }, style.label)
                                ])
                            ])
                        ])
                    ]);
                };
        
                // Enhanced Connection Setup with verification
                const EnhancedConnectionSetup = ({
                    messages, 
                    onCreateOffer, 
                    onCreateAnswer, 
                    onConnect, 
                    onClearData,
                    onVerifyConnection,
                    connectionStatus,
                    offerData,
                    answerData,
                    offerInput,
                    setOfferInput,
                    answerInput,
                    setAnswerInput,
                    showOfferStep,
                    showAnswerStep,
                    verificationCode,
                    showVerification,
                    showQRCode,
                    qrCodeUrl,
                    showQRScanner,
                    setShowQRCode,
                    setShowQRScanner,
                    setShowQRScannerModal,
                    offerPassword,
                    answerPassword,
                    localVerificationConfirmed,
                    remoteVerificationConfirmed,
                    bothVerificationsConfirmed,
                    // QR control props
                    qrFramesTotal,
                    qrFrameIndex,
                    qrManualMode,
                    toggleQrManualMode,
                    nextQrFrame,
                    prevQrFrame,
                    markAnswerCreated
                }) => {
                    const [mode, setMode] = React.useState('select');
        
                    const resetToSelect = () => {
                        setMode('select');
                        onClearData();
                    };
        
                    const handleVerificationConfirm = () => {
                        onVerifyConnection(true);
                    };
        
                    const handleVerificationReject = () => {
                        onVerifyConnection(false);
                    };
        
                    if (showVerification) {
                        return React.createElement('div', {
                            className: "min-h-[calc(100vh-104px)] flex items-center justify-center p-4"
                        }, [
                            React.createElement('div', {
                                key: 'verification',
                                className: "w-full max-w-md"
                            }, [
                                React.createElement(VerificationStep, {
                                    verificationCode: verificationCode,
                                    onConfirm: handleVerificationConfirm,
                                    onReject: handleVerificationReject,
                                    localConfirmed: localVerificationConfirmed,
                                    remoteConfirmed: remoteVerificationConfirmed,
                                    bothConfirmed: bothVerificationsConfirmed
                                })
                            ])
                        ]);
                    }
        
                    if (mode === 'select') {
                        return React.createElement('div', {
                            className: "min-h-[calc(100vh-104px)] flex items-center justify-center p-4"
                        }, [
                            React.createElement('div', {
                                key: 'selector',
                                className: "w-full max-w-4xl"
                            }, [
                                React.createElement('div', {
                                    key: 'header',
                                    className: "text-center mb-8"
                                }, [
                                    React.createElement('h2', {
                                        key: 'title',
                                        className: "text-2xl font-semibold text-primary mb-3"
                                    }, 'Start secure communication'),
                                    React.createElement('p', {
                                        key: 'subtitle',
                                        className: "text-secondary max-w-2xl mx-auto"
                                    }, "Choose a connection method for a secure channel with ECDH encryption and Perfect Forward Secrecy.")
                                ]),
        
                                React.createElement('div', {
                                    key: 'options',
                                    className: "flex flex-col md:flex-row items-center justify-center gap-6 max-w-3xl mx-auto"
                                }, [
                                    // Create Connection
                                    React.createElement('div', {
                                        key: 'create',
                                        onClick: () => setMode('create'),
                                        className: "card-minimal rounded-xl p-6 cursor-pointer group flex-1 create"
                                    }, [
                                        React.createElement('div', {
                                            key: 'icon',
                                            className: "w-12 h-12 bg-blue-500/10 border border-blue-500/20 rounded-lg flex items-center justify-center mx-auto mb-4"
                                        }, [
                                            React.createElement('i', {
                                                className: 'fas fa-plus text-xl text-blue-400'
                                            })
                                        ]),
                                        React.createElement('h3', {
                                            key: 'title',
                                            className: "text-lg font-semibold text-primary text-center mb-3"
                                        }, "Create channel"),
                                        React.createElement('p', {
                                            key: 'description',
                                            className: "text-secondary text-center text-sm mb-4"
                                        }, "Initiate a new secure connection"),
                                        React.createElement('div', {
                                            key: 'features',
                                            className: "space-y-2"
                                        }, [
                                            React.createElement('div', {
                                                key: 'f1',
                                                className: "flex items-center text-sm text-muted"
                                            }, [
                                                React.createElement('i', {
                                                    className: 'fas fa-key accent-orange mr-2 text-xs'
                                                }),
                                                'Generating ECDH keys'
                                            ]),
                                            React.createElement('div', {
                                                key: 'f2',
                                                className: "flex items-center text-sm text-muted"
                                            }, [
                                                React.createElement('i', {
                                                    className: 'fas fa-shield-alt accent-orange mr-2 text-xs'
                                                }),
                                                'Verification code'
                                            ]),
                                            React.createElement('div', {
                                                key: 'f3',
                                                className: "flex items-center text-sm text-muted"
                                            }, [
                                                React.createElement('i', {
                                                    className: 'fas fa-sync-alt accent-purple mr-2 text-xs'
                                                }),
                                                'PFS key rotation'
                                            ])
                                        ])
                                    ]),
                                    React.createElement('div', {
                                        key: 'divider',
                                        className: "flex flex-row md:flex-col items-center gap-4 px-4 w-full md:w-auto"
                                    }, [
                                        React.createElement('div', {
                                        key: 'line-a',
                                        className: "h-px flex-1 bg-gradient-to-r from-transparent via-zinc-700 to-transparent md:h-32 md:w-px md:flex-none md:bg-gradient-to-b"
                                        }),
                                        React.createElement('div', {
                                        key: 'or-text',
                                        className: "text-zinc-600 text-sm font-medium px-3"
                                        }, "OR"),
                                        React.createElement('div', {
                                        key: 'line-b',
                                        className: "h-px flex-1 bg-gradient-to-r from-transparent via-zinc-700 to-transparent md:h-32 md:w-px md:flex-none md:bg-gradient-to-b"
                                        })
                                    ]),
                                    // Join Connection
                                    React.createElement('div', {
                                        key: 'join',
                                        onClick: () => setMode('join'),
                                        className: "card-minimal rounded-xl p-6 cursor-pointer group flex-1 join"
                                    }, [
                                        React.createElement('div', {
                                            key: 'icon',
                                            className: "w-12 h-12 bg-green-500/10 border border-green-500/20 rounded-lg flex items-center justify-center mx-auto mb-4"
                                        }, [
                                            React.createElement('i', {
                                                className: 'fas fa-link text-xl accent-green'
                                            })
                                        ]),
                                        React.createElement('h3', {
                                            key: 'title',
                                            className: "text-lg font-semibold text-primary text-center mb-3"
                                        }, "Join"),
                                        React.createElement('p', {
                                            key: 'description',
                                            className: "text-secondary text-center text-sm mb-4"
                                        }, "Connect to an existing secure channel"),
                                        React.createElement('div', {
                                            key: 'features',
                                            className: "space-y-2"
                                        }, [
                                            React.createElement('div', {
                                                key: 'f1',
                                                className: "flex items-center text-sm text-muted"
                                            }, [
                                                React.createElement('i', {
                                                    className: 'fas fa-paste accent-green mr-2 text-xs'
                                                }),
                                                'Paste Offer invitation'
                                            ]),
                                            React.createElement('div', {
                                                key: 'f2',
                                                className: "flex items-center text-sm text-muted"
                                            }, [
                                                React.createElement('i', {
                                                    className: 'fas fa-check-circle accent-green mr-2 text-xs'
                                                }),
                                                'Automatic verification'
                                            ]),
                                            React.createElement('div', {
                                                key: 'f3',
                                                className: "flex items-center text-sm text-muted"
                                            }, [
                                                React.createElement('i', {
                                                    className: 'fas fa-sync-alt accent-purple mr-2 text-xs'
                                                }),
                                                'PFS protection'
                                            ])
                                        ])
                                    ])
                                ]),
        
                                           
                                React.createElement(SecurityFeatures, { key: 'security-features' }),
                                
                                React.createElement(Roadmap, { key: 'roadmap' }),
                            ])
                        ]);
                    }
        
                    if (mode === 'create') {
                        return React.createElement('div', {
                            className: "min-h-[calc(100vh-104px)] flex items-center justify-center p-4"
                        }, [
                            React.createElement('div', {
                                key: 'create-flow',
                                className: "w-full max-w-3xl space-y-6"
                            }, [
                                React.createElement('div', {
                                    key: 'header',
                                    className: "text-center"
                                }, [
                                    React.createElement('button', {
                                        key: 'back',
                                        onClick: resetToSelect,
                                        className: "mb-4 text-secondary hover:text-primary transition-colors flex items-center mx-auto text-sm"
                                    }, [
                                        React.createElement('i', {
                                            className: 'fas fa-arrow-left mr-2'
                                        }),
                                        'Back to selection'
                                    ]),
                                    React.createElement('h2', {
                                        key: 'title',
                                        className: "text-xl font-semibold text-primary mb-2"
                                    }, 'Creating a secure channel')
                                ]),
        
                                // Step 1
                                !showAnswerStep && React.createElement('div', {
                                    key: 'step1',
                                    className: "card-minimal rounded-xl p-6"
                                }, [
                                    React.createElement('div', {
                                        key: 'step-header',
                                        className: "flex items-center mb-4"
                                    }, [
                                        React.createElement('div', {
                                            key: 'number',
                                            className: "step-number mr-3"
                                        }, '1'),
                                        React.createElement('h3', {
                                            key: 'title',
                                            className: "text-lg font-medium text-primary"
                                        }, "Generating ECDH keys and verification code")
                                    ]),
                                    React.createElement('p', {
                                        key: 'description',
                                        className: "text-secondary text-sm mb-4"
                                    }, "Creating cryptographically strong keys and codes to protect against attacks"),
                                    !showOfferStep && React.createElement('button', {
                                        key: 'create-btn',
                                        onClick: onCreateOffer,
                                        disabled: connectionStatus === 'connecting',
                                        className: `w-full btn-primary text-white py-3 px-4 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed`
                                    }, [
                                        React.createElement('i', {
                                            className: 'fas fa-shield-alt mr-2'
                                        }),
                                        'Create secure keys'
                                    ]),
        
                                    showOfferStep && React.createElement('div', {
                                        key: 'offer-result',
                                        className: "mt-6 space-y-4"
                                    }, [
                                        React.createElement('div', {
                                            key: 'success',
                                            className: "p-3 bg-green-500/10 border border-green-500/20 rounded-lg"
                                        }, [
                                            React.createElement('p', {
                                                className: "text-green-400 text-sm font-medium flex items-center"
                                            }, [
                                                React.createElement('i', {
                                                    className: 'fas fa-check-circle mr-2'
                                                }),
                                                'Secure invitation created! Send the code to your contact'
                                            ])
                                        ]),
                                        React.createElement('div', {
                                            key: 'offer-data',
                                            className: "space-y-3"
                                        }, [
                                            // Raw JSON hidden intentionally; users copy compressed string or use QR
                                            React.createElement('div', {
                                                key: 'buttons',
                                                className: "flex gap-2"
                                            }, [
                                            React.createElement(EnhancedCopyButton, {
                                                key: 'copy',
                                                text: (() => {
                                                    try {
                                                        const min = typeof offerData === 'object' ? JSON.stringify(offerData) : (offerData || '');
                                                        if (typeof window.encodeBinaryToPrefixed === 'function') {
                                                            return window.encodeBinaryToPrefixed(min);
                                                        }
                                                        if (typeof window.compressToPrefixedGzip === 'function') {
                                                            return window.compressToPrefixedGzip(min);
                                                        }
                                                        return min;
                                                    } catch { return typeof offerData === 'object' ? JSON.stringify(offerData) : (offerData || ''); }
                                                })(),
                                                    className: "flex-1 px-3 py-2 bg-orange-500/10 hover:bg-orange-500/20 text-orange-400 border border-orange-500/20 rounded text-sm font-medium"
                                                }, 'Copy invitation code')
                                            ]),
                                            showQRCode && qrCodeUrl && React.createElement('div', {
                                                key: 'qr-container',
                                                className: "mt-4 p-4 border border-gray-600/30 rounded-lg text-center"
                                            }, [
                                                React.createElement('h4', {
                                                    key: 'qr-title',
                                                    className: "text-sm font-medium text-primary mb-3"
                                                }, 'Scan QR code to connect'),
                                                React.createElement('div', {
                                                    key: 'qr-wrapper',
                                                    className: "flex justify-center"
                                                }, [
                                                    React.createElement('img', {
                                                        key: 'qr-image',
                                                        src: qrCodeUrl,
                                                        alt: "QR Code for secure connection",
                                                        className: "max-w-none h-auto border border-gray-600/30 rounded w-[20rem] sm:w-[24rem] md:w-[28rem] lg:w-[32rem]"
                                                    })
                                                ]),

                                                ((qrFramesTotal || 0) >= 1) && React.createElement('div', {
                                                    key: 'qr-controls-below',
                                                    className: "mt-4 flex flex-col items-center gap-2"
                                                }, [
                                                    React.createElement('div', {
                                                        key: 'frame-indicator',
                                                        className: "text-xs text-gray-300"
                                                    }, `Frame ${Math.max(1, (qrFrameIndex || 1))}/${qrFramesTotal || 1}`),
                                                    React.createElement('div', {
                                                        key: 'control-buttons',
                                                        className: "flex gap-1"
                                                    }, [
                                                        (qrFramesTotal || 0) > 1 && React.createElement('button', {
                                                            key: 'prev-frame',
                                                            onClick: prevQrFrame,
                                                            className: "w-6 h-6 bg-gray-600 hover:bg-gray-500 text-white rounded text-xs flex items-center justify-center"
                                                        }, '◀'),
                                                        React.createElement('button', {
                                                            key: 'toggle-manual',
                                                            onClick: toggleQrManualMode,
                                                            className: `px-2 py-1 rounded text-xs font-medium ${
                                                                (qrManualMode || false)
                                                                    ? 'bg-blue-500 text-white' 
                                                                    : 'bg-gray-600 text-gray-300 hover:bg-gray-500'
                                                            }`
                                                        }, (qrManualMode || false) ? 'Manual' : 'Auto'),
                                                        (qrFramesTotal || 0) > 1 && React.createElement('button', {
                                                            key: 'next-frame',
                                                            onClick: nextQrFrame,
                                                            className: "w-6 h-6 bg-gray-600 hover:bg-gray-500 text-white rounded text-xs flex items-center justify-center"
                                                        }, '▶')
                                                    ])
                                                ]),
                                                React.createElement('p', {
                                                    key: 'qr-description',
                                                    className: "text-xs text-gray-400 mt-2"
                                                }, 'Your contact can scan this QR code to quickly join the secure session')
                                            ])
                                        ])
                                    ])
                                ]),
        
                                // Step 2 - Session Type Selection
                                // showOfferStep && React.createElement('div', {
                                //     key: 'step2',
                                //     className: "card-minimal rounded-xl p-6"
                                // }, [
                                //     React.createElement('div', {
                                //         key: 'step-header',
                                //         className: "flex items-center mb-4"
                                //     }, [
                                //         React.createElement('div', {
                                //             key: 'number',
                                //             className: "w-8 h-8 bg-green-500 text-white rounded-lg flex items-center justify-center font-semibold text-sm mr-3"
                                //         }, '2'),
                                //         React.createElement('h3', {
                                //             key: 'title',
                                //             className: "text-lg font-medium text-primary"
                                //         }, "Select session type")
                                //     ]),
                                //     React.createElement('p', {
                                //         key: 'description',
                                //         className: "text-secondary text-sm mb-4"
                                //     }, "Choose a session plan or use limited demo mode for testing."),
                                //     React.createElement(SessionTypeSelector, {
                                //         key: 'session-selector',
                                //         onSelectType: (sessionType) => {
                                //             // Save the selected session type
                                //             setSelectedSessionType(sessionType);
                                //             console.log('🎯 Session type selected:', sessionType);
                                            
                                //             // FIX: For demo sessions, we immediately call automatic activation
                                //             if (sessionType === 'demo') {
                                //                 console.log('🎮 Demo session selected, scheduling automatic activation...');
                                //                 // Delay activation for 2 seconds to stabilize
                                //                 setTimeout(() => {
                                //                     if (sessionManager) {
                                //                         console.log('🚀 Triggering demo session activation from selection...');
                                //                         handleDemoVerification();
                                //                     }
                                //                 }, 2000);
                                //             }
                                            
                                //             // Open a modal payment window
                                //             if (typeof window.showPaymentModal === 'function') {
                                //                 window.showPaymentModal(sessionType);
                                //             } else {
                                //                 // Fallback - show session information
                                //                 console.log('Selected session type:', sessionType);
                                //             }
                                //         },
                                //         onCancel: resetToSelect,
                                //         sessionManager: window.sessionManager
                                //     })
                                // ]),
        
                                // Step 3 - Waiting for response
                                showOfferStep && React.createElement('div', {
                                    key: 'step2',
                                    className: "card-minimal rounded-xl p-6"
                                }, [
                                    React.createElement('div', {
                                        key: 'step-header',
                                        className: "flex items-center mb-4"
                                    }, [
                                        React.createElement('div', {
                                            key: 'number',
                                            className: "w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center font-semibold text-sm mr-3"
                                        }, '2'),
                                        React.createElement('h3', {
                                            key: 'title',
                                            className: "text-lg font-medium text-primary"
                                        }, "Waiting for the peer's response")
                                    ]),
                                    React.createElement('p', {
                                        key: 'description',
                                        className: "text-secondary text-sm mb-4"
                                    }, "Paste the encrypted invitation code from your contact."),
                                    React.createElement('div', {
                                        key: 'buttons',
                                        className: "flex gap-2 mb-4"
                                    }, [
                                        React.createElement('button', {
                                            key: 'scan-btn',
                                            onClick: () => setShowQRScannerModal(true),
                                            className: "px-4 py-2 bg-purple-500/10 hover:bg-purple-500/20 text-purple-400 border border-purple-500/20 rounded text-sm font-medium transition-all duration-200"
                                        }, [
                                            React.createElement('i', {
                                                key: 'icon',
                                                className: 'fas fa-qrcode mr-2'
                                            }),
                                            'Scan QR Code'
                                        ])
                                    ]),
                                    React.createElement('textarea', {
                                        key: 'input',
                                        value: answerInput,
                                        onChange: (e) => {
                                            setAnswerInput(e.target.value);
                                            // Mark answer as created when user manually enters data
                                            if (e.target.value.trim().length > 0) {
                                                if (typeof markAnswerCreated === 'function') {
                                                    markAnswerCreated();
                                                }
                                            }

                                        },
                                        rows: 6,
                                        placeholder: "Paste the encrypted response code from your contact or scan QR code...",
                                        className: "w-full p-3 bg-custom-bg border border-gray-500/20 rounded-lg resize-none mb-4 text-secondary placeholder-gray-500 focus:border-orange-500/40 focus:outline-none transition-all custom-scrollbar text-sm"
                                    }),
                                    React.createElement('button', {
                                        key: 'connect-btn',
                                        onClick: onConnect,
                                        disabled: !answerInput.trim(),
                                        className: "w-full btn-secondary text-white py-3 px-4 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                                    }, [
                                        React.createElement('i', {
                                            className: 'fas fa-rocket mr-2'
                                        }),
                                        'Establish connection'
                                    ])
                                ])
                            ])
                        ]);
                    }
        
                    if (mode === 'join') {
                        return React.createElement('div', {
                            className: "min-h-[calc(100vh-104px)] flex items-center justify-center p-4"
                        }, [
                            React.createElement('div', {
                                key: 'join-flow',
                                className: "w-full max-w-3xl space-y-6"
                            }, [
                                React.createElement('div', {
                                    key: 'header',
                                    className: "text-center"
                                }, [
                                    React.createElement('button', {
                                        key: 'back',
                                        onClick: resetToSelect,
                                        className: "mb-4 text-secondary hover:text-primary transition-colors flex items-center mx-auto text-sm"
                                    }, [
                                        React.createElement('i', {
                                            className: 'fas fa-arrow-left mr-2'
                                        }),
                                        'Back to selection'
                                    ]),
                                    React.createElement('h2', {
                                        key: 'title',
                                        className: "text-xl font-semibold text-primary mb-2"
                                    }, 'Joining the secure channel')
                                ]),
        
                                (showAnswerStep ? null : React.createElement('div', {
                                    key: 'step1',
                                    className: "card-minimal rounded-xl p-6"
                                }, [
                                    React.createElement('div', {
                                        key: 'step-header',
                                        className: "flex items-center mb-4"
                                    }, [
                                        React.createElement('div', {
                                            key: 'number',
                                            className: "w-8 h-8 bg-green-500 text-white rounded-lg flex items-center justify-center font-semibold text-sm mr-3"
                                        }, '1'),
                                        React.createElement('h3', {
                                            key: 'title',
                                            className: "text-lg font-medium text-primary"
                                        }, "Paste secure invitation")
                                    ]),
                                    React.createElement('p', {
                                        key: 'description',
                                        className: "text-secondary text-sm mb-4"
                                    }, "Copy and paste the encrypted invitation code from the initiator."),
                                    React.createElement('textarea', {
                                        key: 'input',
                                        value: offerInput,
                                        onChange: (e) => {
                                            setOfferInput(e.target.value);
                                            if (e.target.value.trim().length > 0) {
                                            if (typeof markAnswerCreated === 'function') {
                                                markAnswerCreated();
                                            }
                                        }
                                        },
                                        rows: 8,
                                        placeholder: "Paste the encrypted invitation code or scan QR code...",
                                        className: "w-full p-3 bg-custom-bg border border-gray-500/20 rounded-lg resize-none mb-4 text-secondary placeholder-gray-500 focus:border-green-500/40 focus:outline-none transition-all custom-scrollbar text-sm"
                                    }),
                                    React.createElement('div', {
                                        key: 'buttons',
                                        className: "flex gap-2 mb-4"
                                    }, [
                                        React.createElement('button', {
                                            key: 'scan-btn',
                                            onClick: () => setShowQRScannerModal(true),
                                            className: "px-4 py-2 bg-purple-500/10 hover:bg-purple-500/20 text-purple-400 border border-purple-500/20 rounded text-sm font-medium transition-all duration-200"
                                        }, [
                                            React.createElement('i', {
                                                key: 'icon',
                                                className: 'fas fa-qrcode mr-2'
                                            }),
                                            'Scan QR Code'
                                        ]),
                                    React.createElement('button', {
                                        key: 'process-btn',
                                        onClick: onCreateAnswer,
                                        disabled: !offerInput.trim() || connectionStatus === 'connecting',
                                            className: "flex-1 btn-secondary text-white py-2 px-4 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                                    }, [
                                        React.createElement('i', {
                                            className: 'fas fa-cogs mr-2'
                                        }),
                                            'Process invitation'
                                        ])
                                    ]),
                                    showQRScanner && React.createElement('div', {
                                        key: 'qr-scanner',
                                        className: "p-4 bg-gray-800/50 border border-gray-600/30 rounded-lg text-center"
                                    }, [
                                        React.createElement('h4', {
                                            key: 'scanner-title',
                                            className: "text-sm font-medium text-primary mb-3"
                                        }, 'QR Code Scanner'),
                                        React.createElement('p', {
                                            key: 'scanner-description',
                                            className: "text-xs text-gray-400 mb-3"
                                        }, 'Use your device camera to scan the QR code from the invitation'),
                                        React.createElement('button', {
                                            key: 'open-scanner',
                                            onClick: () => {
                                                if (typeof setShowQRScannerModal === 'function') {
                                                    setShowQRScannerModal(true);
                                                } else {
                                                    console.error('setShowQRScannerModal is not a function:', setShowQRScannerModal);
                                                }
                                            },
                                            className: "w-full px-4 py-3 bg-purple-600 hover:bg-purple-500 text-white rounded-lg font-medium transition-all duration-200 mb-3"
                                        }, [
                                            React.createElement('i', {
                                                key: 'camera-icon',
                                                className: 'fas fa-camera mr-2'
                                            }),
                                            'Open Camera Scanner'
                                        ]),
                                        React.createElement('button', {
                                            key: 'test-qr',
                                            onClick: async () => {
                                                console.log('Creating test QR code...');
                                                if (window.generateQRCode) {
                                                    const testData = '{"type":"test","message":"Hello QR Scanner!"}';
                                                    const qrUrl = await window.generateQRCode(testData);
                                                    console.log('Test QR code generated:', qrUrl);
                                                    const newWindow = window.open();
                                                    newWindow.document.write(`<img src="${qrUrl}" style="width: 300px; height: 300px;">`);
                                                }
                                            },
                                            className: "px-3 py-1 bg-green-600/20 hover:bg-green-600/30 text-green-300 border border-green-500/20 rounded text-xs font-medium transition-all duration-200 mr-2"
                                        }, 'Test QR'),
                                        React.createElement('button', {
                                            key: 'close-scanner',
                                            onClick: () => setShowQRScanner(false),
                                            className: "px-3 py-1 bg-gray-600/20 hover:bg-gray-600/30 text-gray-300 border border-gray-500/20 rounded text-xs font-medium transition-all duration-200"
                                        }, 'Close Scanner')
                                    ])
                                ])),
        
                                // Step 2
                                showAnswerStep && React.createElement('div', {
                                    key: 'step2',
                                    className: "card-minimal rounded-xl p-6"
                                }, [
                                    React.createElement('div', {
                                        key: 'step-header',
                                        className: "flex items-center mb-4"
                                    }, [
                                        React.createElement('div', {
                                            key: 'number',
                                            className: "step-number mr-3"
                                        }, '2'),
                                        React.createElement('h3', {
                                            key: 'title',
                                            className: "text-lg font-medium text-primary"
                                        }, "Sending a secure response")
                                    ]),
                                    React.createElement('div', {
                                        key: 'success',
                                        className: "p-3 bg-green-500/10 border border-green-500/20 rounded-lg mb-4"
                                    }, [
                                        React.createElement('p', {
                                            className: "text-green-400 text-sm font-medium flex items-center"
                                        }, [
                                            React.createElement('i', {
                                                className: 'fas fa-check-circle mr-2'
                                            }),
                                            'Secure response created! Send this code to the initiator:'
                                        ])
                                    ]),
                                    React.createElement('div', {
                                        key: 'answer-data',
                                        className: "space-y-3 mb-4"
                                    }, [
                                        // Raw JSON hidden intentionally; users copy compressed string or use QR
                                        React.createElement(EnhancedCopyButton, {
                                            key: 'copy',
                                            text: (() => {
                                                try {
                                                    const min = typeof answerData === 'object' ? JSON.stringify(answerData) : (answerData || '');
                                                    if (typeof window.encodeBinaryToPrefixed === 'function') {
                                                        return window.encodeBinaryToPrefixed(min);
                                                    }
                                                    if (typeof window.compressToPrefixedGzip === 'function') {
                                                        return window.compressToPrefixedGzip(min);
                                                    }
                                                    return min;
                                                } catch { return typeof answerData === 'object' ? JSON.stringify(answerData) : (answerData || ''); }
                                            })(),
                                            className: "w-full px-3 py-2 bg-green-500/10 hover:bg-green-500/20 text-green-400 border border-green-500/20 rounded text-sm font-medium"
                                        }, 'Copy response code')
                                    ]),
                                    // QR Code section for answer
                                    qrCodeUrl && React.createElement('div', {
                                        key: 'qr-container',
                                        className: "mt-4 p-4 border border-gray-600/30 rounded-lg text-center"
                                    }, [
                                        React.createElement('h4', {
                                            key: 'qr-title',
                                            className: "text-sm font-medium text-primary mb-3"
                                        }, 'Scan QR code to complete connection'),
                                        React.createElement('div', {
                                            key: 'qr-wrapper',
                                            className: "flex justify-center"
                                        }, [
                                            React.createElement('img', {
                                                key: 'qr-image',
                                                src: qrCodeUrl,
                                                alt: "QR Code for secure response",
                                                className: "max-w-none h-auto border border-gray-600/30 rounded w-[20rem] sm:w-[24rem] md:w-[28rem] lg:w-[32rem]"
                                            })
                                        ]),

                                        ((qrFramesTotal || 0) >= 1) && React.createElement('div', {
                                            key: 'qr-controls-below',
                                            className: "mt-4 flex flex-col items-center gap-2"
                                        }, [
                                            React.createElement('div', {
                                                key: 'frame-indicator',
                                                className: "text-xs text-gray-300"
                                            }, `Frame ${Math.max(1, (qrFrameIndex || 1))}/${qrFramesTotal || 1}`),
                                            React.createElement('div', {
                                                key: 'control-buttons',
                                                className: "flex gap-1"
                                            }, [
                                                (qrFramesTotal || 0) > 1 && React.createElement('button', {
                                                    key: 'prev-frame',
                                                    onClick: prevQrFrame,
                                                    className: "w-6 h-6 bg-gray-600 hover:bg-gray-500 text-white rounded text-xs flex items-center justify-center"
                                                }, '◀'),
                                                React.createElement('button', {
                                                    key: 'toggle-manual',
                                                    onClick: toggleQrManualMode,
                                                    className: `px-2 py-1 rounded text-xs font-medium ${
                                                        qrManualMode 
                                                            ? 'bg-blue-500 text-white' 
                                                            : 'bg-gray-600 text-gray-300 hover:bg-gray-500'
                                                    }`
                                                }, qrManualMode ? 'Manual' : 'Auto'),
                                                (qrFramesTotal || 0) > 1 && React.createElement('button', {
                                                    key: 'next-frame',
                                                    onClick: nextQrFrame,
                                                    className: "w-6 h-6 bg-gray-600 hover:bg-gray-500 text-white rounded text-xs flex items-center justify-center"
                                                }, '▶')
                                            ])
                                        ]),
                                        React.createElement('p', {
                                            key: 'qr-description',
                                            className: "text-xs text-gray-400 mt-2"
                                        }, 'The initiator can scan this QR code to complete the secure connection')
                                    ]),
                                    React.createElement('div', {
                                        key: 'info',
                                        className: "p-3 bg-purple-500/10 border border-purple-500/20 rounded-lg"
                                    }, [
                                        React.createElement('p', {
                                            className: "text-purple-400 text-sm flex items-center justify-center"
                                        }, [
                                            React.createElement('i', {
                                                className: 'fas fa-shield-alt mr-2'
                                            }),
                                            'The connection will be established with verification'
                                        ])
                                    ])
                                ])
                            ])
                        ]);
                    }
                };
        
                // Global scroll function - defined outside components to ensure availability
                const createScrollToBottomFunction = (chatMessagesRef) => {
                    return () => {
                        if (chatMessagesRef && chatMessagesRef.current) {
                            const scrollAttempt = () => {
                                if (chatMessagesRef.current) {
                                    chatMessagesRef.current.scrollTo({
                                        top: chatMessagesRef.current.scrollHeight,
                                        behavior: 'smooth'
                                    });
                                }
                            };
                            scrollAttempt();
        
                            setTimeout(scrollAttempt, 50);
                            setTimeout(scrollAttempt, 150);
                            setTimeout(scrollAttempt, 300);
        
                            requestAnimationFrame(() => {
                                setTimeout(scrollAttempt, 100);
                            });
                        }
                    };
                };
        
               const EnhancedChatInterface = ({
            messages,
            messageInput,
            setMessageInput,
            onSendMessage,
            onDisconnect,
            keyFingerprint,
            isVerified,
            chatMessagesRef,
            scrollToBottom,
            webrtcManager
        }) => {
            const [showScrollButton, setShowScrollButton] = React.useState(false);
            const [showFileTransfer, setShowFileTransfer] = React.useState(false);

            React.useEffect(() => {
                if (chatMessagesRef.current && messages.length > 0) {
                    const { scrollTop, scrollHeight, clientHeight } = chatMessagesRef.current;
                    const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
                    if (isNearBottom) {
                        const smoothScroll = () => {
                            if (chatMessagesRef.current) {
                                chatMessagesRef.current.scrollTo({
                                    top: chatMessagesRef.current.scrollHeight,
                                    behavior: 'smooth'
                                });
                            }
                        };
                        smoothScroll();
                        setTimeout(smoothScroll, 50);
                        setTimeout(smoothScroll, 150);
                    }
                }
            }, [messages, chatMessagesRef]);
        
            // Обработчик скролла
            const handleScroll = () => {
                if (chatMessagesRef.current) {
                    const { scrollTop, scrollHeight, clientHeight } = chatMessagesRef.current;
                    const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
                    setShowScrollButton(!isNearBottom);
                }
            };
        
            // Прокрутка вниз по кнопке
            const handleScrollToBottom = () => {
                console.log('🔍 handleScrollToBottom called, scrollToBottom type:', typeof scrollToBottom);
                if (typeof scrollToBottom === 'function') {
                    scrollToBottom();
                    setShowScrollButton(false);
                } else {
                    console.error('scrollToBottom is not a function:', scrollToBottom);
                    // Fallback: direct scroll
                    if (chatMessagesRef.current) {
                        chatMessagesRef.current.scrollTo({
                            top: chatMessagesRef.current.scrollHeight,
                            behavior: 'smooth'
                        });
                    }
                    setShowScrollButton(false);
                }
            };

            const handleKeyPress = (e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    onSendMessage();
                }
            };

            const isFileTransferReady = () => {
                if (!webrtcManager) return false;
                
                const connected = webrtcManager.isConnected ? webrtcManager.isConnected() : false;
                const verified = webrtcManager.isVerified || false;
                const hasDataChannel = webrtcManager.dataChannel && webrtcManager.dataChannel.readyState === 'open';
                
                return connected && verified && hasDataChannel;
            };
        
            // Возврат JSX через React.createElement
            return React.createElement(
                'div',
                {
                    className: "chat-container flex flex-col",
                    style: { backgroundColor: '#272827', height: 'calc(100vh - 64px)' }
                },
                [
                    // Область сообщений
                    React.createElement(
                        'div',
                        { className: "flex-1 flex flex-col overflow-hidden" },
                        React.createElement(
                            'div',
                            { className: "flex-1 max-w-4xl mx-auto w-full p-4 overflow-hidden" },
                            React.createElement(
                                'div',
                                {
                                    ref: chatMessagesRef,
                                    onScroll: handleScroll,
                                    className: "h-full overflow-y-auto space-y-3 hide-scrollbar pr-2 scroll-smooth"
                                },
                                messages.length === 0 ?
                                    React.createElement(
                                        'div',
                                        { className: "flex items-center justify-center h-full" },
                                        React.createElement(
                                            'div',
                                            { className: "text-center max-w-md" },
                                            [
                                                React.createElement(
                                                    'div',
                                                    { className: "w-16 h-16 bg-green-500/10 border border-green-500/20 rounded-xl flex items-center justify-center mx-auto mb-4" },
                                                    React.createElement(
                                                        'svg',
                                                        { className: "w-8 h-8 text-green-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                                                        React.createElement('path', {
                                                            strokeLinecap: "round",
                                                            strokeLinejoin: "round",
                                                            strokeWidth: 2,
                                                            d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                                                        })
                                                    )
                                                ),
                                                React.createElement('h3', { className: "text-lg font-medium text-gray-300 mb-2" }, "Secure channel is ready!"),
                                                React.createElement('p', { className: "text-gray-400 text-sm mb-4" }, "All messages are protected by modern cryptographic algorithms"),
                                                React.createElement(
                                                    'div',
                                                    { className: "text-left space-y-2" },
                                                    [
                                                        ['End-to-end encryption', 'M5 13l4 4L19 7'],
                                                        ['Protection against replay attacks', 'M5 13l4 4L19 7'],
                                                        ['Integrity verification', 'M5 13l4 4L19 7'],
                                                        ['Perfect Forward Secrecy', 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15']
                                                    ].map(([text, d], i) =>
                                                        React.createElement(
                                                            'div',
                                                            { key: `f${i}`, className: "flex items-center text-sm text-gray-400" },
                                                            [
                                                                React.createElement(
                                                                    'svg',
                                                                    {
                                                                        className: `w-4 h-4 mr-3 ${i === 3 ? 'text-purple-500' : 'text-green-500'}`,
                                                                        fill: "none",
                                                                        stroke: "currentColor",
                                                                        viewBox: "0 0 24 24"
                                                                    },
                                                                    React.createElement('path', {
                                                                        strokeLinecap: "round",
                                                                        strokeLinejoin: "round",
                                                                        strokeWidth: 2,
                                                                        d: d
                                                                    })
                                                                ),
                                                                text
                                                            ]
                                                        )
                                                    )
                                                )
                                            ]
                                        )
                                    ) :
                                    messages.map((msg) =>
                                        React.createElement(EnhancedChatMessage, {
                                            key: msg.id,
                                            message: msg.message,
                                            type: msg.type,
                                            timestamp: msg.timestamp
                                        })
                                    )
                            )
                        )
                    ),
        
                    // Кнопка прокрутки вниз
                    showScrollButton &&
                        React.createElement(
                            'button',
                            {
                                onClick: handleScrollToBottom,
                                className: "fixed right-6 w-12 h-12 bg-green-500/20 hover:bg-green-500/30 border border-green-500/30 text-green-400 rounded-full flex items-center justify-center transition-all duration-200 shadow-lg z-50",
                                style: { bottom: '160px' }
                            },
                            React.createElement(
                                'svg',
                                { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                                React.createElement('path', {
                                    strokeLinecap: "round",
                                    strokeLinejoin: "round",
                                    strokeWidth: 2,
                                    d: "M19 14l-7 7m0 0l-7-7m7 7V3"
                                })
                            )
                        ),

                    React.createElement(
                        'div',
                        {
                            className: "flex-shrink-0 border-t border-gray-500/10",
                            style: { backgroundColor: '#272827' }
                        },
                        React.createElement(
                            'div',
                            { className: "max-w-4xl mx-auto px-4" },
                            [
                                React.createElement(
                                    'button',
                                    {
                                        onClick: () => setShowFileTransfer(!showFileTransfer),
                                        className: `flex items-center text-sm text-gray-400 hover:text-gray-300 transition-colors py-4 ${showFileTransfer ? 'mb-4' : ''}`
                                    },
                                    [
                                        React.createElement(
                                            'svg',
                                            {
                                                className: `w-4 h-4 mr-2 transform transition-transform ${showFileTransfer ? 'rotate-180' : ''}`,
                                                fill: "none",
                                                stroke: "currentColor",
                                                viewBox: "0 0 24 24"
                                            },
                                            showFileTransfer ?
                                                React.createElement('path', {
                                                    strokeLinecap: "round",
                                                    strokeLinejoin: "round",
                                                    strokeWidth: 2,
                                                    d: "M5 15l7-7 7 7"
                                                }) :
                                                React.createElement('path', {
                                                    strokeLinecap: "round",
                                                    strokeLinejoin: "round",
                                                    strokeWidth: 2,
                                                    d: "M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"
                                                })
                                        ),
                                        showFileTransfer ? 'Hide file transfer' : 'Send files'
                                    ]
                                ),
                                showFileTransfer &&
                                    React.createElement(window.FileTransferComponent || (() => 
                                        React.createElement('div', {
                                            className: "p-4 text-center text-red-400"
                                        }, 'FileTransferComponent not loaded')
                                    ), {
                                        webrtcManager: webrtcManager,
                                        isConnected: isFileTransferReady()
                                    })
                            ]
                        )
                    ),

                    React.createElement(
                        'div',
                        { className: "border-t border-gray-500/10" },
                        React.createElement(
                            'div',
                            { className: "max-w-4xl mx-auto p-4" },
                            React.createElement(
                                'div',
                                { className: "flex items-stretch space-x-3" },
                                [
                                    React.createElement(
                                        'div',
                                        { className: "flex-1 relative" },
                                        [
                                            React.createElement('textarea', {
                                                value: messageInput,
                                                onChange: (e) => setMessageInput(e.target.value),
                                                onKeyDown: handleKeyPress,
                                                placeholder: "Enter message to encrypt...",
                                                rows: 2,
                                                maxLength: 2000,
                                                style: { backgroundColor: '#272827' },
                                                className: "w-full p-3 border border-gray-600 rounded-lg resize-none text-gray-300 placeholder-gray-500 focus:border-green-500/40 focus:outline-none transition-all custom-scrollbar text-sm"
                                            }),
                                            React.createElement(
                                                'div',
                                                { className: "absolute bottom-2 right-3 flex items-center space-x-2 text-xs text-gray-400" },
                                                [
                                                    React.createElement('span', null, `${messageInput.length}/2000`),
                                                    React.createElement('span', null, "• Enter to send")
                                                ]
                                            )
                                        ]
                                    ),
                                    React.createElement(
                                        'button',
                                        {
                                            onClick: onSendMessage,
                                            disabled: !messageInput.trim(),
                                            className: "bg-green-400/20 text-green-400 p-3 rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center min-h-[72px]"
                                        },
                                        React.createElement(
                                            'svg',
                                            { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                                            React.createElement('path', {
                                                strokeLinecap: "round",
                                                strokeLinejoin: "round",
                                                strokeWidth: 2,
                                                d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
                                            })
                                        )
                                    )
                                ]
                            )
                        )
                    )
                ]
            );
        };
        
        
                // Main Enhanced Application Component
                const EnhancedSecureP2PChat = () => {

                    const [messages, setMessages] = React.useState([]);
                    const [connectionStatus, setConnectionStatus] = React.useState('disconnected');
                    
                    // Moved scrollToBottom logic to be available globally
                    const [messageInput, setMessageInput] = React.useState('');
                    const [offerData, setOfferData] = React.useState('');
                    const [answerData, setAnswerData] = React.useState('');
                    const [offerInput, setOfferInput] = React.useState('');
                    const [answerInput, setAnswerInput] = React.useState('');
                    const [keyFingerprint, setKeyFingerprint] = React.useState('');
                    const [verificationCode, setVerificationCode] = React.useState('');
                    const [showOfferStep, setShowOfferStep] = React.useState(false);
                    const [showAnswerStep, setShowAnswerStep] = React.useState(false);
                    const [showVerification, setShowVerification] = React.useState(false);
                    const [showQRCode, setShowQRCode] = React.useState(false);
                    const [qrCodeUrl, setQrCodeUrl] = React.useState('');
                    const [showQRScanner, setShowQRScanner] = React.useState(false);
                    const [showQRScannerModal, setShowQRScannerModal] = React.useState(false);
                    const [isVerified, setIsVerified] = React.useState(false);
                    const [securityLevel, setSecurityLevel] = React.useState(null);
                    
                    // Mutual verification states
                    const [localVerificationConfirmed, setLocalVerificationConfirmed] = React.useState(false);
                    const [remoteVerificationConfirmed, setRemoteVerificationConfirmed] = React.useState(false);
                    const [bothVerificationsConfirmed, setBothVerificationsConfirmed] = React.useState(false);
                    
                    // PAKE password states removed - using SAS verification instead
                    
                    // Session state - all security features enabled by default
                    const [sessionTimeLeft, setSessionTimeLeft] = React.useState(0);
                    const [pendingSession, setPendingSession] = React.useState(null);
                    
                    // All security features are enabled by default - no payment required
        
        
                    
                    // ============================================
                    // CENTRALIZED CONNECTION STATE MANAGEMENT
                    // ============================================
                    
                    const [connectionState, setConnectionState] = React.useState({
                        status: 'disconnected',
                        hasActiveAnswer: false,
                        answerCreatedAt: null,
                        isUserInitiatedDisconnect: false
                    });
                    
                    // Centralized connection state handler
                    const updateConnectionState = (newState, options = {}) => {
                        const { preserveAnswer = false, isUserAction = false } = options;
                        
                        setConnectionState(prev => ({
                            ...prev,
                            ...newState,
                            isUserInitiatedDisconnect: isUserAction,
                            hasActiveAnswer: preserveAnswer ? prev.hasActiveAnswer : false,
                            answerCreatedAt: preserveAnswer ? prev.answerCreatedAt : null
                        }));
                    };
                    
                    // Check if we should preserve answer data
                    const shouldPreserveAnswerData = () => {
                        const now = Date.now();
                        const answerAge = now - (connectionState.answerCreatedAt || 0);
                        const maxPreserveTime = 300000;
        

                        const hasAnswerData = (answerData && answerData.trim().length > 0) || 
                                            (answerInput && answerInput.trim().length > 0);

                        const hasAnswerQR = qrCodeUrl && qrCodeUrl.trim().length > 0;
                        
                        const shouldPreserve = (connectionState.hasActiveAnswer && 
                               answerAge < maxPreserveTime && 
                               !connectionState.isUserInitiatedDisconnect) ||
                               (hasAnswerData && answerAge < maxPreserveTime && 
                               !connectionState.isUserInitiatedDisconnect) ||
                               (hasAnswerQR && answerAge < maxPreserveTime && 
                               !connectionState.isUserInitiatedDisconnect);
                        
                        
                        return shouldPreserve;
                    };
                    
                    // Mark answer as created
                    const markAnswerCreated = () => {
                        updateConnectionState({
                            hasActiveAnswer: true,
                            answerCreatedAt: Date.now()
                        });
                    };
                    
                    // Global functions for cleanup
                    React.useEffect(() => {
                        window.forceCleanup = () => {
                            handleClearData();
                            if (webrtcManagerRef.current) {
                                webrtcManagerRef.current.disconnect();
                            }
                        };

                        window.clearLogs = () => {
                            if (typeof console.clear === 'function') {
                                console.clear();
                            }
                        };
                        
                        return () => {
                            delete window.forceCleanup;
                            delete window.clearLogs;
                        };
                    }, []);
        
                    const webrtcManagerRef = React.useRef(null);
                    // Expose for modules/UI that run outside this closure (e.g., inline handlers)
                    // Safe because it's a ref object and we maintain it centrally here
                    window.webrtcManagerRef = webrtcManagerRef;
        
                    const addMessageWithAutoScroll = React.useCallback((message, type) => {
                        const newMessage = {
                            message,
                            type,
                            id: Date.now() + Math.random(),
                            timestamp: Date.now()
                        };
                        
                        setMessages(prev => {
                            const updated = [...prev, newMessage];
                            
                            setTimeout(() => {
                                if (chatMessagesRef?.current) {
                                    const container = chatMessagesRef.current;
                                    try {
                                        const { scrollTop, scrollHeight, clientHeight } = container;
                                        const isNearBottom = scrollHeight - scrollTop - clientHeight < 100;
                                        
                                        if (isNearBottom || prev.length === 0) {
                                            requestAnimationFrame(() => {
                                                if (container && container.scrollTo) {
                                                    container.scrollTo({
                                                        top: container.scrollHeight,
                                                        behavior: 'smooth'
                                                    });
                                                }
                                            });
                                        }
                                    } catch (error) {
                                        console.warn('Scroll error:', error);
                                        container.scrollTop = container.scrollHeight;
                                    }
                                }
                            }, 50);
                            
                            return updated;
                        });
                    }, []);
        
                    // Update security level based on real verification
                    const updateSecurityLevel = React.useCallback(async () => {
                        if (window.isUpdatingSecurity) {
                            return;
                        }
                        
                        window.isUpdatingSecurity = true;
                        
                        try {
                            if (webrtcManagerRef.current) {
                                // All security features are enabled by default - always show MAXIMUM level
                                setSecurityLevel({
                                    level: 'MAXIMUM',
                                    score: 100,
                                    color: 'green',
                                    details: 'All security features enabled by default',
                                    passedChecks: 10,
                                    totalChecks: 10,
                                    isRealData: true
                                });
                                
                                if (window.DEBUG_MODE) {
                                    const currentLevel = webrtcManagerRef.current.ecdhKeyPair && webrtcManagerRef.current.ecdsaKeyPair 
                                        ? await webrtcManagerRef.current.calculateSecurityLevel()
                                        : {
                                            level: 'MAXIMUM',
                                            score: 100,
                                            sessionType: 'premium',
                                            passedChecks: 10,
                                            totalChecks: 10
                                        };
                                }
                            }
                        } catch (error) {
                            console.error('Failed to update security level:', error);
                            setSecurityLevel({
                                level: 'ERROR',
                                score: 0,
                                color: 'red',
                                details: 'Verification failed'
                            });
                        } finally {
                            setTimeout(() => {
                                window.isUpdatingSecurity = false;
                            }, 2000);
                        }
                    }, []);
        
                    // Session time ticker - unlimited sessions
                    React.useEffect(() => {
                        const timer = setInterval(() => {
                            // Sessions are unlimited - no time restrictions
                                setSessionTimeLeft(0);
                        }, 1000);
                        return () => clearInterval(timer);
                    }, []);
        
                    // Sessions are unlimited - no expiration handler needed
        
                    // All security features are enabled by default - no demo sessions needed
                    const chatMessagesRef = React.useRef(null);
        
                    // Create scroll function using global helper
                    const scrollToBottom = createScrollToBottomFunction(chatMessagesRef);
                    
                    // Auto-scroll when messages change
                    React.useEffect(() => {
                        if (messages.length > 0 && chatMessagesRef.current) {
                            scrollToBottom();
                            setTimeout(scrollToBottom, 50);
                            setTimeout(scrollToBottom, 150);
                        }
                    }, [messages]);
                    
                    // PAKE password functions removed - using SAS verification instead
        
                    React.useEffect(() => {
                        // Prevent multiple initializations
                        if (webrtcManagerRef.current) {
                            console.log('⚠️ WebRTC Manager already initialized, skipping...');
                            return;
                        }
        
                        const handleMessage = (message, type) => {
                            if (typeof message === 'string' && message.trim().startsWith('{')) {
                                try {
                                    const parsedMessage = JSON.parse(message);
                                    const blockedTypes = [
                                        'file_transfer_start',
                                        'file_transfer_response',
                                        'file_chunk',
                                        'chunk_confirmation',
                                        'file_transfer_complete',
                                        'file_transfer_error',
                                        'heartbeat',
                                        'verification',
                                        'verification_response',
                                        'verification_confirmed',
                                        'verification_both_confirmed',
                                        'peer_disconnect',
                                        'key_rotation_signal',
                                        'key_rotation_ready',
                                        'security_upgrade'
                                    ];
                                    if (parsedMessage.type && blockedTypes.includes(parsedMessage.type)) {
                                        console.log(`Blocked system/file message from chat: ${parsedMessage.type}`);
                                        return; 
                                    }
                                } catch (parseError) {

                                }
                            }
                            
                            addMessageWithAutoScroll(message, type);
                        };
        
                        const handleStatusChange = (status) => {
                            setConnectionStatus(status);
                            
                            if (status === 'connected') {
                                document.dispatchEvent(new CustomEvent('new-connection'));
                                
                                // Не скрываем верификацию при 'connected' - только при 'verified'
                                // setIsVerified(true);
                                // setShowVerification(false);
                                if (!window.isUpdatingSecurity) {
                                    updateSecurityLevel().catch(console.error);
                                }
                            } else if (status === 'verifying') {
                                setShowVerification(true);
                                if (!window.isUpdatingSecurity) {
                                    updateSecurityLevel().catch(console.error);
                                }
                            } else if (status === 'verified') {
                                setIsVerified(true);
                                setShowVerification(false);
                                setBothVerificationsConfirmed(true);
                                setConnectionStatus('connected');
                                // Force immediate update of isVerified state
                                setTimeout(() => {
                                    setIsVerified(true);
                                }, 0);
                                if (!window.isUpdatingSecurity) {
                                    updateSecurityLevel().catch(console.error);
                                }
                            } else if (status === 'connecting') {
                                if (!window.isUpdatingSecurity) {
                                    updateSecurityLevel().catch(console.error);
                                }
                            } else if (status === 'disconnected') {
                                updateConnectionState({ status: 'disconnected' });
                                setConnectionStatus('disconnected');

                                if (shouldPreserveAnswerData()) {
                                    setIsVerified(false);
                                    setShowVerification(false);
                                    return;
                                }

                                setIsVerified(false);
                                setShowVerification(false);
                                
                                // Dispatch disconnected event for SessionTimer
                                document.dispatchEvent(new CustomEvent('disconnected'));
                                
                                // Clear verification states
                                setLocalVerificationConfirmed(false);
                                setRemoteVerificationConfirmed(false);
                                setBothVerificationsConfirmed(false);
                                
                                // Clear connection data
                                setOfferData(null);
                                setAnswerData(null);
                                setOfferInput('');
                                setAnswerInput('');
                                setShowOfferStep(false);
                                setShowAnswerStep(false);
                                setKeyFingerprint('');
                                setVerificationCode('');
                                setSecurityLevel(null);
                                
                                // Reset session and timer
                                    setSessionTimeLeft(0);
                                
                                // Return to main page after a short delay
                                setTimeout(() => {
                                    setConnectionStatus('disconnected');
                                    setShowVerification(false);
                                    
                                    setOfferData(null);
                                    setAnswerData(null);
                                    setOfferInput('');
                                    setAnswerInput('');
                                    setShowOfferStep(false);
                                    setShowAnswerStep(false);
                                    setMessages([]);
                                }, 1000);

                            } else if (status === 'peer_disconnected') {
                                    setSessionTimeLeft(0);
        
                                document.dispatchEvent(new CustomEvent('peer-disconnect'));
                                
                                // A short delay before clearing to display the status
                                setTimeout(() => {
                                    setKeyFingerprint('');
                                    setVerificationCode('');
                                    setSecurityLevel(null);
                                    setIsVerified(false);
                                    setShowVerification(false);
                                    setConnectionStatus('disconnected');
                                    
                                    // Clear verification states
                                    setLocalVerificationConfirmed(false);
                                    setRemoteVerificationConfirmed(false);
                                    setBothVerificationsConfirmed(false);
                                    
                                    // Clear connection data
                                    setOfferData(null);
                                    setAnswerData(null);
                                    setOfferInput('');
                                    setAnswerInput('');
                                    setShowOfferStep(false);
                                    setShowAnswerStep(false);
                                    setMessages([]);
        

                                    if (typeof console.clear === 'function') {
                                        console.clear();
                                    }

                                }, 2000);
                            }
                        };
        
                        const handleKeyExchange = (fingerprint) => {
                            if (fingerprint === '') {
                                setKeyFingerprint('');
                            } else {
                                setKeyFingerprint(fingerprint);
                            }
                        };
                        
                        const handleVerificationRequired = (code) => {
                            if (code === '') {
                                setVerificationCode('');
                                setShowVerification(false);
                            } else {
                                setVerificationCode(code);
                                setShowVerification(true);
                            }
                        };
        
                        const handleVerificationStateChange = (state) => {
                            setLocalVerificationConfirmed(state.localConfirmed);
                            setRemoteVerificationConfirmed(state.remoteConfirmed);
                            setBothVerificationsConfirmed(state.bothConfirmed);
                        };
        
                        // Callback for handling response errors
                        const handleAnswerError = (errorType, errorMessage) => {
                            if (errorType === 'replay_attack') {
                                // Reset the session upon replay attack
                                    setSessionTimeLeft(0);
                                setPendingSession(null);
                                
                                addMessageWithAutoScroll('💡 Data is outdated. Please create a new invitation or use a current response code.', 'system');
        
                                if (typeof console.clear === 'function') {
                                    console.clear();
                                }
                            } else if (errorType === 'security_violation') {
                                // Reset the session upon security breach
                                    setSessionTimeLeft(0);
                                setPendingSession(null);
                                
                                addMessageWithAutoScroll(` Security breach: ${errorMessage}`, 'system');
        
                                if (typeof console.clear === 'function') {
                                    console.clear();
                                }
                            }
                        };
        
        
                        if (typeof console.clear === 'function') {
                            console.clear();
                        }
                        
                        webrtcManagerRef.current = new EnhancedSecureWebRTCManager(
                            handleMessage, 
                            handleStatusChange, 
                            handleKeyExchange,
                            handleVerificationRequired,
                            handleAnswerError,
                            handleVerificationStateChange
                        );
        
                        handleMessage(' SecureBit.chat Enhanced Security Edition v4.3.120 - ECDH + DTLS + SAS initialized. Ready to establish a secure connection with ECDH key exchange, DTLS fingerprint verification, and SAS authentication to prevent MITM attacks.', 'system');
        
                        const handleBeforeUnload = (event) => {
                            if (event.type === 'beforeunload' && !isTabSwitching) {
                                
                                if (webrtcManagerRef.current && webrtcManagerRef.current.isConnected()) {
                                    try {
                                        webrtcManagerRef.current.sendSystemMessage({
                                            type: 'peer_disconnect',
                                            reason: 'user_disconnect',
                                            timestamp: Date.now()
                                        });
                                    } catch (error) {
                                    }
                                    
                                    setTimeout(() => {
                            if (webrtcManagerRef.current) {
                                webrtcManagerRef.current.disconnect();
                                        }
                                    }, 100);
                                } else if (webrtcManagerRef.current) {
                                    webrtcManagerRef.current.disconnect();
                                }
                            } else if (isTabSwitching) {
                                event.preventDefault();
                                event.returnValue = '';
                            }
                        };
                        
                        window.addEventListener('beforeunload', handleBeforeUnload);
                        
                        let isTabSwitching = false;
                        let tabSwitchTimeout = null;
                        
                        const handleVisibilityChange = () => {
                            if (document.visibilityState === 'hidden') {
                                isTabSwitching = true;
                                
                                if (tabSwitchTimeout) {
                                    clearTimeout(tabSwitchTimeout);
                                }
                                
                                tabSwitchTimeout = setTimeout(() => {
                                    isTabSwitching = false;
                                }, 5000); 
                                
                            } else if (document.visibilityState === 'visible') {
                                isTabSwitching = false;
                                
                                if (tabSwitchTimeout) {
                                    clearTimeout(tabSwitchTimeout);
                                    tabSwitchTimeout = null;
                                }
                            }
                        };
                        
                        document.addEventListener('visibilitychange', handleVisibilityChange);
        
                    // Setup file transfer callbacks
                    if (webrtcManagerRef.current) {
                        webrtcManagerRef.current.setFileTransferCallbacks(
                            // Progress callback
                            (progress) => {
                                console.log('File progress:', progress);
                            },
                            
                            // File received callback
                            (fileData) => {
                                const sizeMb = Math.max(1, Math.round((fileData.fileSize || 0) / (1024 * 1024)));
                                const downloadMessage = React.createElement('div', {
                                    className: 'flex items-center space-x-2'
                                }, [
                                    React.createElement('span', { key: 'label' }, ` File received: ${fileData.fileName} (${sizeMb} MB)`),
                                    React.createElement('button', {
                                        key: 'btn',
                                        className: 'px-3 py-1 rounded bg-blue-600 hover:bg-blue-700 text-white text-xs',
                                        onClick: async () => {
                                            try {
                                                const url = await fileData.getObjectURL();
                                const a = document.createElement('a');
                                a.href = url;
                                a.download = fileData.fileName;
                                a.click();
                                                setTimeout(() => fileData.revokeObjectURL(url), 15000);
                                            } catch (e) {
                                                console.error('Download failed:', e);
                                                addMessageWithAutoScroll(` File upload error: ${String(e?.message || e)}`, 'system');
                                            }
                                        }
                                    }, 'Download')
                                ]);
                                
                                addMessageWithAutoScroll(downloadMessage, 'system');
                            },
                            
                            // Error callback
                            (error) => {
                                console.error('File transfer error:', error);
                                
                                if (error.includes('Connection not ready')) {
                                    addMessageWithAutoScroll(` File transfer error: connection not ready. Try again later.`, 'system');
                                } else if (error.includes('File too large')) {
                                    addMessageWithAutoScroll(` File is too big. Maximum size: 100 MB`, 'system');
                                } else {
                                    addMessageWithAutoScroll(` File transfer error: ${error}`, 'system');
                                }
                            }
                        );
                    }
        
                    return () => {
                        window.removeEventListener('beforeunload', handleBeforeUnload);
                        document.removeEventListener('visibilitychange', handleVisibilityChange);
                        
                        if (tabSwitchTimeout) {
                            clearTimeout(tabSwitchTimeout);
                            tabSwitchTimeout = null;
                        }
                        
                        if (webrtcManagerRef.current) {
                            webrtcManagerRef.current.disconnect();
                            webrtcManagerRef.current = null;
                        }
                    };
                    }, []); // Empty dependency array to run only once
        
                    // All security features are enabled by default - no session purchase needed
        
                    const compressOfferData = (offerData) => {
                        try {
                            // Parse the offer data if it's a string
                            const offer = typeof offerData === 'string' ? JSON.parse(offerData) : offerData;
                            
                            // Create a minimal version with only the most essential data
                            const minimalOffer = {
                                type: offer.type,
                                version: offer.version,
                                timestamp: offer.timestamp,
                                sessionId: offer.sessionId,
                                connectionId: offer.connectionId,
                                verificationCode: offer.verificationCode,
                                salt: offer.salt,
                                // Use only key fingerprints instead of full keys
                                keyFingerprints: offer.keyFingerprints,
                                // Add a reference to get full data
                                fullDataAvailable: true,
                                compressionLevel: 'minimal'
                            };
                            
                            return JSON.stringify(minimalOffer);
                        } catch (error) {
                            console.error('Error compressing offer data:', error);
                            return offerData; // Return original if compression fails
                        }
                    };

                    const createQRReference = (offerData) => {
                        try {
                            // Create a unique reference ID for this offer
                            const referenceId = `offer_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
                            
                            // Store the full offer data in localStorage with the reference ID
                            localStorage.setItem(`qr_offer_${referenceId}`, JSON.stringify(offerData));
                            
                            // Create a minimal QR code with just the reference
                            const qrReference = {
                                type: 'secure_offer_reference',
                                referenceId: referenceId,
                                timestamp: Date.now(),
                                message: 'Scan this QR code and use the reference ID to get full offer data'
                            };
                            
                            return JSON.stringify(qrReference);
                        } catch (error) {
                            console.error('Error creating QR reference:', error);
                            return null;
                        }
                    };

                    const createTemplateOffer = (offer) => {
                        // Minimal template to keep QR within single image capacity
                        const templateOffer = {
                            type: 'enhanced_secure_offer_template',
                            version: '4.0',
                            sessionId: offer.sessionId,
                            connectionId: offer.connectionId,
                            verificationCode: offer.verificationCode,
                            timestamp: offer.timestamp,
                            // Avoid bulky fields (SDP, raw keys); keep only fingerprints and essentials
                            keyFingerprints: offer.keyFingerprints,
                            // Keep concise auth hints (omit large nonces)
                            authChallenge: offer?.authChallenge?.challenge,
                            // Optionally include a compact capability hint if small
                            capabilities: Array.isArray(offer.capabilities) && offer.capabilities.length <= 5
                                ? offer.capabilities
                                : undefined
                        };
                        
                        return templateOffer;
                    };

                    // Conservative QR payload limits (characters). Adjust per error correction level.
                    const MAX_QR_LEN = 800;      // for JSON/plain/gzip
                    const BIN_MAX_QR_LEN = 400;  // stricter for SB1:bin to improve scan reliability
                    const [qrFramesTotal, setQrFramesTotal] = React.useState(0);
                    const [qrFrameIndex, setQrFrameIndex] = React.useState(0);
                    const [qrManualMode, setQrManualMode] = React.useState(false);

                    // Animated QR state (for multi-chunk COSE)
                    const qrAnimationRef = React.useRef({ timer: null, chunks: [], idx: 0, active: false });
                    const stopQrAnimation = () => {
                        try { if (qrAnimationRef.current.timer) { clearInterval(qrAnimationRef.current.timer); } } catch {}
                        qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
                        setQrFrameIndex(0);
                        setQrFramesTotal(0);
                        setQrManualMode(false);
                    };

                    // Render frame at current index (no index mutation)
                    const renderCurrent = async () => {
                        const { chunks, idx } = qrAnimationRef.current || {};
                        if (!chunks || !chunks.length) return;
                        const current = chunks[idx % chunks.length];
                        try {
                            const isDesktop = (typeof window !== 'undefined') && ((window.innerWidth || 0) >= 1024);
                            const QR_SIZE = isDesktop ? 720 : 512;
                            const url = await (window.generateQRCode ? window.generateQRCode(current, { errorCorrectionLevel: 'M', margin: 2, size: QR_SIZE }) : Promise.resolve(''));
                            if (url) setQrCodeUrl(url);
                        } catch (e) {
                            console.warn('Animated QR render error (current):', e);
                        }
                        setQrFrameIndex(((qrAnimationRef.current?.idx || 0) % (qrAnimationRef.current?.chunks?.length || 1)) + 1);
                    };

                    // Render current frame, then advance index by 1
                    const renderAndAdvance = async () => {
                        await renderCurrent();
                        const len = qrAnimationRef.current?.chunks?.length || 0;
                        if (len > 0) {
                            const nextIdx = ((qrAnimationRef.current?.idx || 0) + 1) % len;
                            qrAnimationRef.current.idx = nextIdx;
                            setQrFrameIndex(nextIdx + 1);
                        }
                    };

                    const toggleQrManualMode = () => {
                        const newManualMode = !qrManualMode;
                        setQrManualMode(newManualMode);
                        
                        if (newManualMode) {

                            if (qrAnimationRef.current.timer) {
                                clearInterval(qrAnimationRef.current.timer);
                                qrAnimationRef.current.timer = null;
                            }
                            console.log('QR Manual mode enabled - auto-scroll stopped');
                        } else {
                            if (qrAnimationRef.current.chunks.length > 1) {
                                const intervalMs = 3000;
                                qrAnimationRef.current.active = true;
                                clearInterval(qrAnimationRef.current.timer);
                                qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
                            }
                            console.log('QR Manual mode disabled - auto-scroll resumed');
                        }
                    };

                    const nextQrFrame = async () => {
                        console.log('🎮 nextQrFrame called, qrFramesTotal:', qrFramesTotal, 'qrAnimationRef.current:', qrAnimationRef.current);
                        if (qrAnimationRef.current.chunks.length > 1) {
                            const nextIdx = (qrAnimationRef.current.idx + 1) % qrAnimationRef.current.chunks.length;
                            qrAnimationRef.current.idx = nextIdx;
                            setQrFrameIndex(nextIdx + 1);
                            console.log('🎮 Next frame index:', nextIdx + 1);
                            // Ensure auto-advance timer runs in manual mode too
                            try { clearInterval(qrAnimationRef.current.timer); } catch {}
                            qrAnimationRef.current.timer = null;
                            await renderCurrent();
                            // If not in manual mode, restart auto timer
                            if (!qrManualMode && qrAnimationRef.current.chunks.length > 1) {
                                const intervalMs = 3000;
                                qrAnimationRef.current.active = true;
                                qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
                            } else {
                                qrAnimationRef.current.active = false;
                            }
                        } else {
                            console.log('🎮 No multiple frames to navigate');
                        }
                    };

                    const prevQrFrame = async () => {
                        console.log('🎮 prevQrFrame called, qrFramesTotal:', qrFramesTotal, 'qrAnimationRef.current:', qrAnimationRef.current);
                        if (qrAnimationRef.current.chunks.length > 1) {
                            const prevIdx = (qrAnimationRef.current.idx - 1 + qrAnimationRef.current.chunks.length) % qrAnimationRef.current.chunks.length;
                            qrAnimationRef.current.idx = prevIdx;
                            setQrFrameIndex(prevIdx + 1);
                            console.log('🎮 Previous frame index:', prevIdx + 1);
                            try { clearInterval(qrAnimationRef.current.timer); } catch {}
                            qrAnimationRef.current.timer = null;
                            await renderCurrent();
                            if (!qrManualMode && qrAnimationRef.current.chunks.length > 1) {
                                const intervalMs = 3000;
                                qrAnimationRef.current.active = true;
                                qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
                            } else {
                                qrAnimationRef.current.active = false;
                            }
                        } else {
                            console.log('🎮 No multiple frames to navigate');
                        }
                    };

                    // Buffer for assembling scanned COSE chunks
                    const qrChunksBufferRef = React.useRef({ id: null, total: 0, seen: new Set(), items: [] });

                    const generateQRCode = async (data) => {
                        try {
                            const originalSize = typeof data === 'string' ? data.length : JSON.stringify(data).length;
                            const isDesktop = (typeof window !== 'undefined') && ((window.innerWidth || 0) >= 1024);
                            const QR_SIZE = isDesktop ? 720 : 512;
                            
                            // Try binary format first (CBOR + deflate + base64url)
                            if (typeof window.generateBinaryQRCodeFromObject === 'function') {
                                try {
                                    const obj = typeof data === 'string' ? JSON.parse(data) : data;
                                    const qrDataUrl = await window.generateBinaryQRCodeFromObject(obj, { errorCorrectionLevel: 'M', size: QR_SIZE, margin: 2 });
                                    if (qrDataUrl) {
                                        try { if (qrAnimationRef.current && qrAnimationRef.current.timer) { clearInterval(qrAnimationRef.current.timer); } } catch {}
                                        qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
                                        setQrFrameIndex(0);
                                        setQrFramesTotal(0);
                                        setQrManualMode(false);
                                        setQrCodeUrl(qrDataUrl);
                                        setQrFramesTotal(1);
                                        setQrFrameIndex(1);
                                        return;
                                    }
                                } catch (e) {
                                    console.warn('Binary QR generation failed, falling back to compressed:', e?.message || e);
                                }
                            }
                            
                            // Fallback to compressed JSON
                            if (typeof window.generateCompressedQRCode === 'function') {
                                try {
                                    const payload = typeof data === 'string' ? data : JSON.stringify(data);
                                    const qrDataUrl = await window.generateCompressedQRCode(payload, { errorCorrectionLevel: 'M', size: QR_SIZE, margin: 2 });
                                    if (qrDataUrl) {
                                        try { if (qrAnimationRef.current && qrAnimationRef.current.timer) { clearInterval(qrAnimationRef.current.timer); } } catch {}
                                        qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
                                        setQrFrameIndex(0);
                                        setQrFramesTotal(0);
                                        setQrManualMode(false);
                                        setQrCodeUrl(qrDataUrl);
                                        setQrFramesTotal(1);
                                        setQrFrameIndex(1);
                                        return;
                                    }
                                } catch (e) {
                                    console.warn('Compressed QR generation failed, falling back to plain:', e?.message || e);
                                }
                            }
                            
                            // Final fallback to plain JSON
                            const payload = typeof data === 'string' ? data : JSON.stringify(data);
                            if (payload.length <= MAX_QR_LEN) {
                                if (!window.generateQRCode) throw new Error('QR code generator unavailable');
                                try { if (qrAnimationRef.current && qrAnimationRef.current.timer) { clearInterval(qrAnimationRef.current.timer); } } catch {}
                                qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
                                setQrFrameIndex(0);
                                setQrFramesTotal(0);
                                setQrManualMode(false);
                                const qrDataUrl = await window.generateQRCode(payload, { errorCorrectionLevel: 'M', size: QR_SIZE, margin: 2 });
                                    setQrCodeUrl(qrDataUrl);
                                setQrFramesTotal(1);
                                setQrFrameIndex(1);
                                    return;
                            }

                            // Large payload: разбиваем на фреймы (plain JSON)
                            try { if (qrAnimationRef.current && qrAnimationRef.current.timer) { clearInterval(qrAnimationRef.current.timer); } } catch {}
                            qrAnimationRef.current = { timer: null, chunks: [], idx: 0, active: false };
                            setQrFrameIndex(0);
                            setQrFramesTotal(0);
                            setQrManualMode(false);
                            const id = `raw_${Date.now()}_${Math.random().toString(36).slice(2)}`;

                            const TARGET_CHUNKS = 10;
                            const FRAME_MAX = Math.max(200, Math.floor(payload.length / TARGET_CHUNKS));
                            const total = Math.ceil(payload.length / FRAME_MAX);
                            const rawChunks = [];
                            for (let i = 0; i < total; i++) {
                                const seq = i + 1;
                                const part = payload.slice(i * FRAME_MAX, (i + 1) * FRAME_MAX);
                                rawChunks.push(JSON.stringify({ hdr: { v: 1, id, seq, total, rt: 'raw' }, body: part }));
                            }
                            if (!window.generateQRCode) throw new Error('QR code generator unavailable');
                            if (rawChunks.length === 1) {
                                const url = await window.generateQRCode(rawChunks[0], { errorCorrectionLevel: 'M', margin: 2, size: QR_SIZE });
                                setQrCodeUrl(url);
                                setQrFramesTotal(1);
                                setQrFrameIndex(1);
                                    return;
                                }
                            qrAnimationRef.current.chunks = rawChunks;
                            qrAnimationRef.current.idx = 0;
                            qrAnimationRef.current.active = true;
                            setQrFramesTotal(rawChunks.length);
                            setQrFrameIndex(1);
                                const EC_OPTS = { errorCorrectionLevel: 'M', margin: 2, size: QR_SIZE };
                                await renderNext();

                                if (!qrManualMode) {
                                    const intervalMs = 4000; // 4 seconds per frame for better readability
                                qrAnimationRef.current.active = true;
                                qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
                                }
                            return;
                        } catch (error) {
                            console.error('QR code generation failed:', error);
                            setMessages(prev => [...prev, {
                                message: ` QR code generation failed: ${error.message}`,
                                type: 'error'
                            }]);
                        }
                    };

                    const reconstructFromTemplate = (templateData) => {
                        // Reconstruct full offer from template
                        const fullOffer = {
                            type: "enhanced_secure_offer",
                            version: templateData.version,
                            timestamp: templateData.timestamp,
                            sessionId: templateData.sessionId,
                            connectionId: templateData.connectionId,
                            verificationCode: templateData.verificationCode,
                            salt: templateData.salt,
                            sdp: templateData.sdp,
                            keyFingerprints: templateData.keyFingerprints,
                            capabilities: templateData.capabilities,
                            
                            // Reconstruct ECDH key object
                            ecdhPublicKey: {
                                keyType: "ECDH",
                                keyData: templateData.ecdhKeyData,
                                timestamp: templateData.timestamp - 1000, // Approximate
                                version: templateData.version,
                                signature: templateData.ecdhSignature
                            },
                            
                            // Reconstruct ECDSA key object
                            ecdsaPublicKey: {
                                keyType: "ECDSA",
                                keyData: templateData.ecdsaKeyData,
                                timestamp: templateData.timestamp - 999, // Approximate
                                version: templateData.version,
                                signature: templateData.ecdsaSignature
                            },
                            
                            // Reconstruct auth challenge
                            authChallenge: {
                                challenge: templateData.authChallenge,
                                timestamp: templateData.timestamp,
                                nonce: templateData.authNonce,
                                version: templateData.version
                            },
                            
                            // Generate security level (can be recalculated)
                            securityLevel: {
                                level: "CRITICAL",
                                score: 20,
                                color: "red",
                                verificationResults: {
                                    encryption: { passed: false, details: "Encryption not working", points: 0 },
                                    keyExchange: { passed: true, details: "Simple key exchange verified", points: 15 },
                                    messageIntegrity: { passed: false, details: "Message integrity failed", points: 0 },
                                    rateLimiting: { passed: true, details: "Rate limiting active", points: 5 },
                                    ecdsa: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
                                    metadataProtection: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
                                    pfs: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
                                    nestedEncryption: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
                                    packetPadding: { passed: false, details: "Enhanced session required - feature not available", points: 0 },
                                    advancedFeatures: { passed: false, details: "Premium session required - feature not available", points: 0 }
                                },
                                timestamp: templateData.timestamp,
                                details: "Real verification: 20/100 security checks passed (2/4 available)",
                                isRealData: true,
                                passedChecks: 2,
                                totalChecks: 4,
                                sessionType: "demo",
                                maxPossibleScore: 50
                            }
                        };
                        
                        return fullOffer;
                    };

                    const handleQRScan = async (scannedData) => {
                        try {
                            console.log('QR Code scanned:', scannedData.substring(0, 100) + '...');
                            console.log('Current buffer state:', qrChunksBufferRef.current);
                            
                            // Check if this is a binary chunk (starts with SB1:bin: or is a raw binary chunk)
                            if (scannedData.startsWith('SB1:bin:') || (qrChunksBufferRef.current && qrChunksBufferRef.current.id)) {
                                console.log('Binary chunk detected:', scannedData.substring(0, 50) + '...');
                                
                                // This is a binary chunk - add to buffer
                                if (!qrChunksBufferRef.current.id) {
                                    console.log('Initializing buffer for binary chunks');
                                    // Initialize buffer for binary chunks
                                    qrChunksBufferRef.current = { 
                                        id: `bin_${Date.now()}`, 
                                        total: 4, // We expect 4 chunks
                                        seen: new Set(), 
                                        items: [],
                                        lastUpdateMs: Date.now()
                                    };
                                }
                                
                                // Add chunk to buffer (use data hash as identifier)
                                const chunkHash = scannedData.substring(0, 50); // Use first 50 chars as hash
                                
                                // Check if this chunk was already scanned
                                if (qrChunksBufferRef.current.seen.has(chunkHash)) {
                                    console.log(`Chunk already scanned, ignoring...`);
                                    return Promise.resolve(false);
                                }
                                
                                qrChunksBufferRef.current.seen.add(chunkHash);
                                qrChunksBufferRef.current.items.push(scannedData);
                                qrChunksBufferRef.current.lastUpdateMs = Date.now();
                                
                                // Emit progress and force re-render
                                try {
                                    const uniqueCount = qrChunksBufferRef.current.seen.size;
                                    document.dispatchEvent(new CustomEvent('qr-scan-progress', { 
                                        detail: { 
                                            id: qrChunksBufferRef.current.id, 
                                            seq: uniqueCount, 
                                            total: qrChunksBufferRef.current.total 
                                        } 
                                    }));
                                    
                                    // Force re-render to update progress indicator
                                    setQrFramesTotal(qrChunksBufferRef.current.total);
                                    setQrFrameIndex(uniqueCount);
                                } catch {}
                                
                                // Check if we have all chunks
                                const isComplete = qrChunksBufferRef.current.seen.size >= qrChunksBufferRef.current.total;
                                console.log(`Chunks collected: ${qrChunksBufferRef.current.seen.size}/${qrChunksBufferRef.current.total}, complete: ${isComplete}`);
                                
                                if (!isComplete) {
                                    // Keep scanner open for more chunks
                                    console.log(`Scanned chunk ${qrChunksBufferRef.current.seen.size}/${qrChunksBufferRef.current.total}, waiting for more...`);
                                    return Promise.resolve(false);
                                }
                                
                                // All chunks collected - reconstruct binary data
                                try {
                                    const fullBinaryData = qrChunksBufferRef.current.items.join('');
                                    // Store the original binary data, not decoded JSON
                                    if (showOfferStep) {
                                        setAnswerInput(fullBinaryData);
                                    } else {
                                        setOfferInput(fullBinaryData);
                                    }
                                    
                                    setMessages(prev => [...prev, { 
                                        message: 'All binary chunks captured. Payload reconstructed.', 
                                        type: 'success' 
                                    }]);
                                    
                                    // Clear buffer and close scanner
                                    qrChunksBufferRef.current = { id: null, total: 0, seen: new Set(), items: [] };
                                    setShowQRScannerModal(false);
                                    return Promise.resolve(true);
                                } catch (e) {
                                    console.warn('Binary chunks reconstruction failed:', e);
                                    return Promise.resolve(false);
                                }
                            }
                            
                            // Check if this might be a binary chunk (long string without JSON structure)
                            if (scannedData.length > 100 && !scannedData.startsWith('{') && !scannedData.startsWith('[')) {
                                console.log('Detected potential binary chunk (long non-JSON string):', scannedData.substring(0, 50) + '...');
                                
                                // Initialize buffer if not exists
                                if (!qrChunksBufferRef.current.id) {
                                    console.log('Initializing buffer for potential binary chunks');
                                    qrChunksBufferRef.current = { 
                                        id: `bin_${Date.now()}`, 
                                        total: 4, // We expect 4 chunks
                                        seen: new Set(), 
                                        items: [],
                                        lastUpdateMs: Date.now()
                                    };
                                }
                                
                                // Add chunk to buffer (use data hash as identifier)
                                const chunkHash = scannedData.substring(0, 50); // Use first 50 chars as hash
                                
                                // Check if this chunk was already scanned
                                if (qrChunksBufferRef.current.seen.has(chunkHash)) {
                                    console.log(`Chunk already scanned, ignoring...`);
                                    return Promise.resolve(false);
                                }
                                
                                qrChunksBufferRef.current.seen.add(chunkHash);
                                qrChunksBufferRef.current.items.push(scannedData);
                                qrChunksBufferRef.current.lastUpdateMs = Date.now();
                                
                                // Force re-render to update progress indicator
                                try {
                                    const uniqueCount = qrChunksBufferRef.current.seen.size;
                                    document.dispatchEvent(new CustomEvent('qr-scan-progress', { 
                                        detail: { 
                                            id: qrChunksBufferRef.current.id, 
                                            seq: uniqueCount, 
                                            total: qrChunksBufferRef.current.total 
                                        } 
                                    }));
                                    
                                    // Force re-render to update progress indicator
                                    setQrFramesTotal(qrChunksBufferRef.current.total);
                                    setQrFrameIndex(uniqueCount);
                                } catch {}
                                
                                // Check if we have all chunks
                                const isComplete = qrChunksBufferRef.current.seen.size >= qrChunksBufferRef.current.total;
                                console.log(`Chunks collected: ${qrChunksBufferRef.current.seen.size}/${qrChunksBufferRef.current.total}, complete: ${isComplete}`);
                                
                                if (!isComplete) {
                                    // Keep scanner open for more chunks
                                    console.log(`Scanned chunk ${qrChunksBufferRef.current.seen.size}/${qrChunksBufferRef.current.total}, waiting for more...`);
                                    return Promise.resolve(false);
                                }
                                
                                // All chunks collected - reconstruct binary data
                                try {
                                    const fullBinaryData = qrChunksBufferRef.current.items.join('');
                                    // Store the original binary data, not decoded JSON
                                    if (showOfferStep) {
                                        setAnswerInput(fullBinaryData);
                                    } else {
                                        setOfferInput(fullBinaryData);
                                    }
                                    
                                    setMessages(prev => [...prev, { 
                                        message: 'All binary chunks captured. Payload reconstructed.', 
                                        type: 'success' 
                                    }]);
                                    
                                    // Clear buffer and close scanner
                                    qrChunksBufferRef.current = { id: null, total: 0, seen: new Set(), items: [] };
                                    setShowQRScannerModal(false);
                                    return Promise.resolve(true);
                                } catch (e) {
                                    console.warn('Binary chunks reconstruction failed:', e);
                                    return Promise.resolve(false);
                                }
                            }
                            
                            // Single QR code - try to decode directly
                            console.log('Processing single QR code:', scannedData.substring(0, 50) + '...');
                            let parsedData;
                            if (typeof window.decodeAnyPayload === 'function') {
                                const any = window.decodeAnyPayload(scannedData);
                                if (typeof any === 'string') {
                                    parsedData = JSON.parse(any);
                                } else {
                                    parsedData = any; // object from binary
                                }
                            } else {
                                const maybeDecompressed = (typeof window.decompressIfNeeded === 'function') ? window.decompressIfNeeded(scannedData) : scannedData;
                                parsedData = JSON.parse(maybeDecompressed);
                            }
                            console.log('Decoded data:', parsedData);
                            
                            // QR with hdr/body: COSE or RAW/BIN animated frames
                            if (parsedData.hdr && parsedData.body) {
                                const { hdr } = parsedData;
                                // Initialize/rotate buffer by id
                                if (!qrChunksBufferRef.current.id || qrChunksBufferRef.current.id !== hdr.id) {
                                    qrChunksBufferRef.current = { id: hdr.id, total: hdr.total || 1, seen: new Set(), items: [], lastUpdateMs: Date.now() };
                                    try {
                                        document.dispatchEvent(new CustomEvent('qr-scan-progress', { detail: { id: hdr.id, seq: 0, total: hdr.total || 1 } }));
                                    } catch {}
                                }
                                // Deduplicate & record
                                if (!qrChunksBufferRef.current.seen.has(hdr.seq)) {
                                    qrChunksBufferRef.current.seen.add(hdr.seq);
                                    qrChunksBufferRef.current.items.push(scannedData);
                                    qrChunksBufferRef.current.lastUpdateMs = Date.now();
                                }
                                // Emit progress based on unique frames captured
                                try {
                                    const uniqueCount = qrChunksBufferRef.current.seen.size;
                                    document.dispatchEvent(new CustomEvent('qr-scan-progress', { detail: { id: hdr.id, seq: uniqueCount, total: qrChunksBufferRef.current.total || hdr.total || 0 } }));
                                } catch {}
                                const isComplete = qrChunksBufferRef.current.seen.size >= (qrChunksBufferRef.current.total || 1);
                                if (!isComplete) {
                                    // Explicitly keep scanner open
                                    return Promise.resolve(false);
                                }
                                // Completed: decide RAW vs BIN vs COSE
                                if (hdr.rt === 'raw') {
                                    try {
                                        // Sort by seq and concatenate bodies
                                        const parts = qrChunksBufferRef.current.items
                                            .map(s => JSON.parse(s))
                                            .sort((a, b) => (a.hdr.seq || 0) - (b.hdr.seq || 0))
                                            .map(p => p.body || '');
                                        const fullText = parts.join('');
                                        const payloadObj = JSON.parse(fullText);
                                        if (showOfferStep) {
                                            setAnswerInput(JSON.stringify(payloadObj, null, 2));
                                        } else {
                                            setOfferInput(JSON.stringify(payloadObj, null, 2));
                                        }
                                        setMessages(prev => [...prev, { message: 'All frames captured. RAW payload reconstructed.', type: 'success' }]);
                                        try { document.dispatchEvent(new CustomEvent('qr-scan-complete', { detail: { id: hdr.id } })); } catch {}
                                        // Close scanner from caller by returning true
                                        qrChunksBufferRef.current = { id: null, total: 0, seen: new Set(), items: [] };
                                        setShowQRScannerModal(false);
                                        return Promise.resolve(true);
                                    } catch (e) {
                                        console.warn('RAW multi-frame reconstruction failed:', e);
                                        return Promise.resolve(false);
                                    }
                                } else if (hdr.rt === 'bin') {
                                    try {
                                        const parts = qrChunksBufferRef.current.items
                                            .map(s => JSON.parse(s))
                                            .sort((a, b) => (a.hdr.seq || 0) - (b.hdr.seq || 0))
                                            .map(p => p.body || '');
                                        const fullText = parts.join(''); // SB1:bin:...
                                        let payloadObj;
                                        if (typeof window.decodeAnyPayload === 'function') {
                                            const any = window.decodeAnyPayload(fullText);
                                            payloadObj = (typeof any === 'string') ? JSON.parse(any) : any;
                                        } else {
                                            payloadObj = JSON.parse(fullText);
                                        }
                                        if (showOfferStep) {
                                            setAnswerInput(JSON.stringify(payloadObj, null, 2));
                                        } else {
                                            setOfferInput(JSON.stringify(payloadObj, null, 2));
                                        }
                                        setMessages(prev => [...prev, { message: 'All frames captured. BIN payload reconstructed.', type: 'success' }]);
                                        try { document.dispatchEvent(new CustomEvent('qr-scan-complete', { detail: { id: hdr.id } })); } catch {}
                                        qrChunksBufferRef.current = { id: null, total: 0, seen: new Set(), items: [] };
                                        setShowQRScannerModal(false);
                                        return Promise.resolve(true);
                                    } catch (e) {
                                        console.warn('BIN multi-frame reconstruction failed:', e);
                                        return Promise.resolve(false);
                                    }
                                } else if (window.receiveAndProcess) {
                                    try {
                                        const results = await window.receiveAndProcess(qrChunksBufferRef.current.items);
                                    if (results.length > 0) {
                                        const { payloadObj } = results[0];
                                        if (showOfferStep) {
                                            setAnswerInput(JSON.stringify(payloadObj, null, 2));
                                        } else {
                                            setOfferInput(JSON.stringify(payloadObj, null, 2));
                                            }
                                            setMessages(prev => [...prev, { message: 'All frames captured. COSE payload reconstructed.', type: 'success' }]);
                                            try { document.dispatchEvent(new CustomEvent('qr-scan-complete', { detail: { id: hdr.id } })); } catch {}
                                            qrChunksBufferRef.current = { id: null, total: 0, seen: new Set(), items: [] };
                                            setShowQRScannerModal(false);
                                            return Promise.resolve(true);
                                        }
                                    } catch (e) {
                                        console.warn('COSE multi-chunk processing failed:', e);
                                    }
                                    return Promise.resolve(false);
                                } else {
                                    return Promise.resolve(false);
                                }
                            }
                            
                            // Check if this is a template-based QR code
                            if (parsedData.type === 'enhanced_secure_offer_template') {
                                console.log('QR scan: Template-based offer detected, reconstructing...');
                                const fullOffer = reconstructFromTemplate(parsedData);
                                
                                // Determine which input to populate based on current mode
                                if (showOfferStep) {
                                    // In "Waiting for peer's response" mode - populate answerInput
                                    setAnswerInput(JSON.stringify(fullOffer, null, 2));
                                    console.log('📱 Template data populated to answerInput (waiting for response mode)');
                                } else {
                                    // In "Paste secure invitation" mode - populate offerInput
                                    setOfferInput(JSON.stringify(fullOffer, null, 2));
                                    console.log('📱 Template data populated to offerInput (paste invitation mode)');
                                }
                                setMessages(prev => [...prev, {
                                    message: '📱 QR code scanned successfully! Full offer reconstructed from template.',
                                    type: 'success'
                                }]);
                                setShowQRScannerModal(false); // Close QR scanner modal
                                return true;
                            }
                            // Check if this is a reference-based QR code
                            else if (parsedData.type === 'secure_offer_reference' && parsedData.referenceId) {
                                // Try to get the full offer data from localStorage
                                const fullOfferData = localStorage.getItem(`qr_offer_${parsedData.referenceId}`);
                                if (fullOfferData) {
                                    const fullOffer = JSON.parse(fullOfferData);
                                    // Determine which input to populate based on current mode
                                    if (showOfferStep) {
                                        // In "Waiting for peer's response" mode - populate answerInput
                                        setAnswerInput(JSON.stringify(fullOffer, null, 2));
                                    } else {
                                        // In "Paste secure invitation" mode - populate offerInput
                                        setOfferInput(JSON.stringify(fullOffer, null, 2));
                                    }
                                    setMessages(prev => [...prev, {
                                        message: '📱 QR code scanned successfully! Full offer data retrieved.',
                                        type: 'success'
                                    }]);
                                    setShowQRScannerModal(false); // Close QR scanner modal
                                    return true;
                                } else {
                                    setMessages(prev => [...prev, {
                                        message: 'QR code reference found but full data not available. Please use copy/paste.',
                                        type: 'error'
                                    }]);
                                    return false;
                                }
                            } else {
                                // If payload was compressed, it's already decompressed above; keep legacy warning only when clearly incomplete
                                if (!parsedData.sdp && parsedData.type === 'enhanced_secure_offer') {
                                    setMessages(prev => [...prev, {
                                        message: 'Compressed QR may omit SDP for brevity. Use copy/paste if connection fails.',
                                        type: 'warning'
                                    }]);
                                }
                                
                                // Determine which input to populate based on current mode
                                if (showOfferStep) {
                                    // In "Waiting for peer's response" mode - populate answerInput
                                    console.log('QR scan: Populating answerInput with:', parsedData);
                                    setAnswerInput(JSON.stringify(parsedData, null, 2));
                                } else {
                                    // In "Paste secure invitation" mode - populate offerInput
                                    console.log('QR scan: Populating offerInput with:', parsedData);
                                    setOfferInput(JSON.stringify(parsedData, null, 2));
                                }
                                setMessages(prev => [...prev, {
                                    message: '📱 QR code scanned successfully!',
                                    type: 'success'
                                }]);
                                setShowQRScannerModal(false);
                                return true;
                            }
                        } catch (error) {
                            // If not JSON, use as plain text
                            if (showOfferStep) {
                                // In "Waiting for peer's response" mode - populate answerInput
                                setAnswerInput(scannedData);
                            } else {
                                // In "Paste secure invitation" mode - populate offerInput
                                setOfferInput(scannedData);
                            }
                            setMessages(prev => [...prev, {
                                message: '📱 QR code scanned successfully!',
                                type: 'success'
                            }]);
                            setShowQRScannerModal(false);
                            return true;
                        }
                    };
        
                    const handleCreateOffer = async () => {
                        try {
                            // All security features are enabled by default
        
                            setOfferData('');
                            setShowOfferStep(false);
                            setShowQRCode(false);
                            setQrCodeUrl('');
                            
                            const offer = await webrtcManagerRef.current.createSecureOffer();
                            
                            // Store offer data directly (no encryption needed with SAS)
                            setOfferData(offer);
                            setShowOfferStep(true);
                            
                            // Generate QR code with binary format and chunking
                            const offerString = typeof offer === 'object' ? JSON.stringify(offer) : offer;
                            try {
                                if (typeof window.encodeBinaryToPrefixed === 'function') {
                                    const bin = window.encodeBinaryToPrefixed(offerString);
                                    // Force chunking into 4 parts - split binary data directly
                                    const TARGET_CHUNKS = 4;
                                    let total = TARGET_CHUNKS;
                                    let FRAME_MAX = Math.max(200, Math.ceil(bin.length / TARGET_CHUNKS));
                                    if (FRAME_MAX <= 0) FRAME_MAX = 200;
                                    
                                    // Ensure we don't exceed TARGET_CHUNKS
                                    if (bin.length <= FRAME_MAX) {
                                        total = 1;
                                        FRAME_MAX = bin.length;
                                    } else {
                                        // Recalculate to ensure exactly TARGET_CHUNKS parts
                                        FRAME_MAX = Math.ceil(bin.length / TARGET_CHUNKS);
                                        total = TARGET_CHUNKS;
                                    }
                                    
                                    const id = `bin_${Date.now()}_${Math.random().toString(36).slice(2)}`;
                                    const chunks = [];
                                    for (let i = 0; i < total; i++) {
                                        const seq = i + 1;
                                        const part = bin.slice(i * FRAME_MAX, (i + 1) * FRAME_MAX);
                                        // Store binary chunks directly without JSON wrapper
                                        chunks.push(part);
                                    }
                                    
                                    // Seed first frame and start auto-advance immediately
                                    const isDesktop = (typeof window !== 'undefined') && ((window.innerWidth || 0) >= 1024);
                                    const QR_SIZE = isDesktop ? 720 : 512;
                                    if (window.generateQRCode && chunks.length > 0) {
                                        const firstUrl = await window.generateQRCode(chunks[0], { errorCorrectionLevel: 'M', size: QR_SIZE, margin: 2 });
                                        if (firstUrl) setQrCodeUrl(firstUrl);
                                    }
                                    
                                    // Store precomputed chunks to ref, ready for animation
                                    try { if (qrAnimationRef.current && qrAnimationRef.current.timer) { clearInterval(qrAnimationRef.current.timer); } } catch {}
                                    qrAnimationRef.current = { timer: null, chunks, idx: 0, active: true };
                                    setQrFramesTotal(chunks.length);
                                    setQrFrameIndex(1);
                                    setQrManualMode(false);
                                    
                                    // Start auto-advance loop for Offer immediately
                                    const intervalMs = 3000;
                                    qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
                                    
                                    // Show QR immediately for Offer flow
                                    try { setShowQRCode(true); } catch {}
                                } else {
                                    // Fallback to single QR
                                    await generateQRCode(offer);
                                    try { setShowQRCode(true); } catch {}
                                }
                            } catch (e) {
                                console.warn('Offer QR generation failed:', e);
                            }
        
                            const existingMessages = messages.filter(m => 
                                m.type === 'system' && 
                                (m.message.includes('Secure invitation created') || m.message.includes('Send the encrypted code'))
                            );
                            
                            if (existingMessages.length === 0) {
                                setMessages(prev => [...prev, { 
                                    message: 'Secure invitation created and encrypted!', 
                                    type: 'system',
                                    id: Date.now(),
                                    timestamp: Date.now()
                                }]);
                                
                                setMessages(prev => [...prev, { 
                                    message: '📤 Send the invitation code to your interlocutor via a secure channel (voice call, SMS, etc.)..', 
                                    type: 'system',
                                    id: Date.now(),
                                    timestamp: Date.now()
                                }]);
        
                            }
        
                            if (!window.isUpdatingSecurity) {
                                updateSecurityLevel().catch(console.error);
                            }
                                                } catch (error) {
                                    setMessages(prev => [...prev, { 
                                        message: `Error creating invitation: ${error.message}`, 
                                        type: 'system',
                                        id: Date.now(),
                                        timestamp: Date.now()
                                    }]);
                                }
                    };
        
                    const handleCreateAnswer = async () => {
                        try {
                            
                            if (!offerInput.trim()) {
                                setMessages(prev => [...prev, { 
                                    message: 'You need to insert the invitation code from your interlocutor.', 
                                    type: 'system',
                                    id: Date.now(),
                                    timestamp: Date.now()
                                }]);
                                return;
                            }
        
                            try {
                                setMessages(prev => [...prev, { 
                                    message: 'Processing the secure invitation...', 
                                    type: 'system',
                                    id: Date.now(),
                                    timestamp: Date.now()
                                }]);
        
                                let offer;
                                try {
                                    // Prefer binary decode first, then gzip JSON
                                    if (typeof window.decodeAnyPayload === 'function') {
                                        const any = window.decodeAnyPayload(offerInput.trim());
                                        offer = (typeof any === 'string') ? JSON.parse(any) : any;
                                    } else {
                                        const rawText = (typeof window.decompressIfNeeded === 'function') ? window.decompressIfNeeded(offerInput.trim()) : offerInput.trim();
                                        offer = JSON.parse(rawText);
                                    }
                                } catch (parseError) {
                                    throw new Error(`Invalid invitation format: ${parseError.message}`);
                                }
        
                                    if (!offer || typeof offer !== 'object') {
                                        throw new Error('The invitation must be an object');
                                    }
        
                                    // Support both compact and legacy offer formats
                                    const isValidOfferType = (offer.t === 'offer') || (offer.type === 'enhanced_secure_offer');
                                    if (!isValidOfferType) {
                                        throw new Error('Invalid invitation type. Expected offer or enhanced_secure_offer');
                                    }

                                    const answer = await webrtcManagerRef.current.createSecureAnswer(offer);
                                    
                                    // Store answer data directly (no encryption needed with SAS)
                                    setAnswerData(answer);
                                    setShowAnswerStep(true);
                                    
                                    // Generate QR code with binary format and chunking
                                    const answerString = typeof answer === 'object' ? JSON.stringify(answer) : answer;
                                    try {
                                        if (typeof window.encodeBinaryToPrefixed === 'function') {
                                            const bin = window.encodeBinaryToPrefixed(answerString);
                                            // Force chunking into 4 parts - split binary data directly
                                            const TARGET_CHUNKS = 4;
                                            let total = TARGET_CHUNKS;
                                            let FRAME_MAX = Math.max(200, Math.ceil(bin.length / TARGET_CHUNKS));
                                            if (FRAME_MAX <= 0) FRAME_MAX = 200;
                                            
                                            // Ensure we don't exceed TARGET_CHUNKS
                                            if (bin.length <= FRAME_MAX) {
                                                total = 1;
                                                FRAME_MAX = bin.length;
                                            } else {
                                                // Recalculate to ensure exactly TARGET_CHUNKS parts
                                                FRAME_MAX = Math.ceil(bin.length / TARGET_CHUNKS);
                                                total = TARGET_CHUNKS;
                                            }
                                            
                                            const id = `ans_${Date.now()}_${Math.random().toString(36).slice(2)}`;
                                            const chunks = [];
                                            for (let i = 0; i < total; i++) {
                                                const seq = i + 1;
                                                const part = bin.slice(i * FRAME_MAX, (i + 1) * FRAME_MAX);
                                                // Store binary chunks directly without JSON wrapper
                                                chunks.push(part);
                                            }
                                            
                                            const isDesktop = (typeof window !== 'undefined') && ((window.innerWidth || 0) >= 1024);
                                            const QR_SIZE = isDesktop ? 720 : 512;
                                            if (window.generateQRCode && chunks.length > 0) {
                                                const firstUrl = await window.generateQRCode(chunks[0], { errorCorrectionLevel: 'M', size: QR_SIZE, margin: 2 });
                                                if (firstUrl) setQrCodeUrl(firstUrl);
                                            }
                                            
                                            try { if (qrAnimationRef.current && qrAnimationRef.current.timer) { clearInterval(qrAnimationRef.current.timer); } } catch {}
                                            qrAnimationRef.current = { timer: null, chunks, idx: 0, active: true };
                                            setQrFramesTotal(chunks.length);
                                            setQrFrameIndex(1);
                                            setQrManualMode(false);
                                            
                                            const intervalMs = 3000;
                                            qrAnimationRef.current.timer = setInterval(renderAndAdvance, intervalMs);
                                            
                                            // Show QR immediately for Answer flow
                                            try { setShowQRCode(true); } catch {}
                                        } else {
                                            // Fallback to single QR
                                            await generateQRCode(answer);
                                            try { setShowQRCode(true); } catch {}
                                        }
                                    } catch (e) {
                                        console.warn('Answer QR generation failed:', e);
                                    }
                                    
                                    // Mark answer as created for state management
                                    if (e.target.value.trim().length > 0) {
                                    if (typeof markAnswerCreated === 'function') {
                                        markAnswerCreated();
                                    }
                                }

        
                                const existingResponseMessages = messages.filter(m => 
                                    m.type === 'system' && 
                                    (m.message.includes('Secure response created') || m.message.includes('Send the response'))
                                );
                                
                                if (existingResponseMessages.length === 0) {
                                    setMessages(prev => [...prev, { 
                                        message: 'Secure response created!', 
                                        type: 'system',
                                        id: Date.now(),
                                        timestamp: Date.now()
                                    }]);
                                    
                                    setMessages(prev => [...prev, { 
                                        message: 'Send the response code to the initiator via a secure channel or let them scan the QR code below.', 
                                        type: 'system',
                                        id: Date.now(),
                                        timestamp: Date.now()
                                    }]);
        
                                }
                                    
                                    // Update security level after creating answer
                                    if (!window.isUpdatingSecurity) {
                                        updateSecurityLevel().catch(console.error);
                                    }
                                } catch (error) {
                                    console.error('Error in handleCreateAnswer:', error);
                                    setMessages(prev => [...prev, { 
                                        message: `Error processing the invitation: ${error.message}`, 
                                        type: 'system',
                                        id: Date.now(),
                                        timestamp: Date.now()
                                    }]);
                                }
                        } catch (error) {
                            console.error('Error in handleCreateAnswer:', error);
                            setMessages(prev => [...prev, { 
                                message: `Invitation processing error: ${error.message}`, 
                                type: 'system',
                                id: Date.now(),
                                timestamp: Date.now()
                            }]);
                        }
                    };
        
                    const handleConnect = async () => {
                        try {
                            if (!answerInput.trim()) {
                                setMessages(prev => [...prev, { 
                                    message: 'You need to insert the response code from your interlocutor.', 
                                    type: 'system',
                                    id: Date.now(),
                                    timestamp: Date.now()
                                }]);
                                return;
                            }
        
                            try {
                                setMessages(prev => [...prev, { 
                                    message: 'Processing the secure response...', 
                                    type: 'system',
                                    id: Date.now(),
                                    timestamp: Date.now()
                                }]);
        
                                let answer;
                                try {
                                    // Prefer binary decode first, then gzip JSON
                                    if (typeof window.decodeAnyPayload === 'function') {
                                        const anyAnswer = window.decodeAnyPayload(answerInput.trim());
                                        answer = (typeof anyAnswer === 'string') ? JSON.parse(anyAnswer) : anyAnswer;
                                    } else {
                                        const rawText = (typeof window.decompressIfNeeded === 'function') ? window.decompressIfNeeded(answerInput.trim()) : answerInput.trim();
                                        answer = JSON.parse(rawText);
                                    }
                                } catch (parseError) {
                                    throw new Error(`Invalid response format: ${parseError.message}`);
                                }
        
                                    if (!answer || typeof answer !== 'object') {
                                        throw new Error('The response must be an object');
                                    }
        
                                    // Support both compact and legacy formats
                                    const answerType = answer.t || answer.type;
                                    if (!answerType || (answerType !== 'answer' && answerType !== 'enhanced_secure_answer')) {
                                        throw new Error('Invalid response type. Expected answer or enhanced_secure_answer');
                                    }
        
                                    await webrtcManagerRef.current.handleSecureAnswer(answer);
                                    
                                    // All security features are enabled by default - no session activation needed
                                    if (pendingSession) {
                                            setPendingSession(null);
                                            setMessages(prev => [...prev, { 
                                            message: `All security features enabled by default`, 
                                                type: 'system',
                                                id: Date.now(),
                                                timestamp: Date.now()
                                            }]);
                                    }
                                    
                                    setMessages(prev => [...prev, { 
                                        message: 'Finalizing the secure connection...', 
                                        type: 'system',
                                        id: Date.now(),
                                        timestamp: Date.now()
                                    }]);
                                    
                                    // Update security level after handling answer
                                    if (!window.isUpdatingSecurity) {
                                        updateSecurityLevel().catch(console.error);
                                    }
                                } catch (error) {
                                    console.error('Error in handleConnect inner try:', error);
                                    
                                    // Более детальная обработка ошибок
                                    let errorMessage = 'Connection setup error';
                                    if (error.message.includes('CRITICAL SECURITY FAILURE')) {
                                        if (error.message.includes('ECDH public key structure')) {
                                            errorMessage = 'Invalid response code - missing or corrupted cryptographic key. Please check the code and try again.';
                                        } else if (error.message.includes('ECDSA public key structure')) {
                                            errorMessage = 'Invalid response code - missing signature verification key. Please check the code and try again.';
                                        } else {
                                            errorMessage = 'Security validation failed - possible attack detected';
                                        }
                                    } else if (error.message.includes('too old') || error.message.includes('replay')) {
                                        errorMessage = 'Response data is outdated - please use a fresh invitation';
                                    } else if (error.message.includes('MITM') || error.message.includes('signature')) {
                                        errorMessage = 'Security breach detected - connection rejected';
                                    } else if (error.message.includes('Invalid') || error.message.includes('format')) {
                                        errorMessage = 'Invalid response format - please check the code';
                                    } else {
                                        errorMessage = ` ${error.message}`;
                                    }
                                    
                                    setMessages(prev => [...prev, { 
                                        message: errorMessage, 
                                        type: 'system',
                                        id: Date.now(),
                                        timestamp: Date.now(),
                                        showRetryButton: true
                                    }]);

                                    if (!error.message.includes('too old') && !error.message.includes('replay')) {
                                        setPendingSession(null);
                                        setSessionTimeLeft(0);
                                    }

                                    setConnectionStatus('failed');
                                    
                                } 
                        } catch (error) {
                            console.error('Error in handleConnect outer try:', error);

                            let errorMessage = 'Connection setup error';
                            if (error.message.includes('CRITICAL SECURITY FAILURE')) {
                                if (error.message.includes('ECDH public key structure')) {
                                    errorMessage = 'Invalid response code - missing or corrupted cryptographic key. Please check the code and try again.';
                                } else if (error.message.includes('ECDSA public key structure')) {
                                    errorMessage = 'Invalid response code - missing signature verification key. Please check the code and try again.';
                                } else {
                                    errorMessage = 'Security validation failed - possible attack detected';
                                }
                            } else if (error.message.includes('too old') || error.message.includes('replay')) {
                                errorMessage = 'Response data is outdated - please use a fresh invitation';
                            } else if (error.message.includes('MITM') || error.message.includes('signature')) {
                                errorMessage = 'Security breach detected - connection rejected';
                            } else if (error.message.includes('Invalid') || error.message.includes('format')) {
                                errorMessage = 'Invalid response format - please check the code';
                            } else {
                                errorMessage = `${error.message}`;
                            }
                            
                            setMessages(prev => [...prev, { 
                                message: errorMessage, 
                                type: 'system',
                                id: Date.now(),
                                timestamp: Date.now(),
                                showRetryButton: true
                            }]);

                            if (!error.message.includes('too old') && !error.message.includes('replay')) {
                                setPendingSession(null);
                                setSessionTimeLeft(0);
                            }

                            setConnectionStatus('failed');
                        }
                    };
        
                    const handleVerifyConnection = (isValid) => {
                        if (isValid) {
                            webrtcManagerRef.current.confirmVerification();
                            // Mark local verification as confirmed
                            setLocalVerificationConfirmed(true);
                        } else {
                            setMessages(prev => [...prev, { 
                                message: ' Verification rejected. The connection is unsafe! Session reset..', 
                                type: 'system',
                                id: Date.now(),
                                timestamp: Date.now()
                            }]);
                            
                            // Clear verification states
                            setLocalVerificationConfirmed(false);
                            setRemoteVerificationConfirmed(false);
                            setBothVerificationsConfirmed(false);
                            setShowVerification(false);
                            setVerificationCode('');
                            
                            // Reset UI to initial state
                            setConnectionStatus('disconnected');
                            setOfferData(null);
                            setAnswerData(null);
                            setOfferInput('');
                            setAnswerInput('');
                            setShowOfferStep(false);
                            setShowAnswerStep(false);
                            setKeyFingerprint('');
                            setSecurityLevel(null);
                            setIsVerified(false);
                            setMessages([]);
                            
                            setSessionTimeLeft(0);
                            setPendingSession(null);
                            
                            // Dispatch disconnected event for SessionTimer
                            document.dispatchEvent(new CustomEvent('disconnected'));
                            
                            handleDisconnect();
                        }
                    };
        
                    const handleSendMessage = async () => {
                        if (!messageInput.trim()) {
                            return;
                        }
        
                        if (!webrtcManagerRef.current) {
                            return;
                        }
        
                        if (!webrtcManagerRef.current.isConnected()) {
                            return;
                        }
        
                        try {
                            
                            // Add the message to local messages immediately (sent message)
                            addMessageWithAutoScroll(messageInput.trim(), 'sent');
                            
                            // Use sendMessage for simple text messages instead of sendSecureMessage
                            await webrtcManagerRef.current.sendMessage(messageInput);
                            setMessageInput('');
                        } catch (error) {
                            const msg = String(error?.message || error);
                            if (!/queued for sending|Data channel not ready/i.test(msg)) {
                                addMessageWithAutoScroll(`Sending error: ${msg}`,'system');
                            }
                        }
                    };
        
                    const handleClearData = () => {
                        setOfferData('');
                        setAnswerData('');
                        setOfferInput('');
                        setAnswerInput('');
                        setShowOfferStep(false);

                        if (!shouldPreserveAnswerData()) {
                            setShowAnswerStep(false);
                        }
                        
                        setShowVerification(false);
                        setShowQRCode(false);
                        setShowQRScanner(false);
                        setShowQRScannerModal(false);
                        // Clear QR scanner buffer
                        qrChunksBufferRef.current = { id: null, total: 0, seen: new Set(), items: [] };

                        if (!shouldPreserveAnswerData()) {
                            setQrCodeUrl('');
                        }
                        
                        setVerificationCode('');
                        setIsVerified(false);
                        setKeyFingerprint('');
                        setSecurityLevel(null);
                        setConnectionStatus('disconnected');
                        setMessages([]);
                        setMessageInput('');
                        
                        // Clear verification states
                        setLocalVerificationConfirmed(false);
                        setRemoteVerificationConfirmed(false);
                        setBothVerificationsConfirmed(false);
                        
                        // PAKE passwords removed - using SAS verification instead 

                        if (typeof console.clear === 'function') {
                            console.clear();
                        }
                        
                        // Cleanup session state
                        setSessionTimeLeft(0);
        
                        setPendingSession(null);
                        document.dispatchEvent(new CustomEvent('peer-disconnect'));
                        // Session manager removed - all features enabled by default
                    };
        
                    const handleDisconnect = () => {
                            setSessionTimeLeft(0);
                        
                        // Mark as user-initiated disconnect
                        updateConnectionState({ 
                            status: 'disconnected',
                            isUserInitiatedDisconnect: true 
                        });
                        
                        // Cleanup session state
                        if (webrtcManagerRef.current) {
                            webrtcManagerRef.current.disconnect();
                        }
        
                        setKeyFingerprint('');
                        setVerificationCode('');
                        setSecurityLevel(null);
                        setIsVerified(false);
                        setShowVerification(false);
                        setConnectionStatus('disconnected');
                        
                        // Clear verification states
                        setLocalVerificationConfirmed(false);
                        setRemoteVerificationConfirmed(false);
                        setBothVerificationsConfirmed(false);
        
                        // Reset UI to initial state (user-initiated disconnect always clears data)
                        setConnectionStatus('disconnected');
                        setShowVerification(false);
                        setOfferData(null);
                        setAnswerData(null);
                        setOfferInput('');
                        setAnswerInput('');
                        setShowOfferStep(false);
                        setShowAnswerStep(false);
                        setKeyFingerprint('');
                        setVerificationCode('');
                        setSecurityLevel(null);
                        setIsVerified(false);
        
                        setMessages([]);
        
                        if (typeof console.clear === 'function') {
                            console.clear();
                        }
        
                        document.dispatchEvent(new CustomEvent('peer-disconnect'));
                        document.dispatchEvent(new CustomEvent('disconnected'));
        
                        document.dispatchEvent(new CustomEvent('session-cleanup', {
                            detail: { 
                                timestamp: Date.now(),
                                reason: 'manual_disconnect'
                            }
                        }));
        
                        setTimeout(() => {
                                setSessionTimeLeft(0);
                        }, 500);
        
                        handleClearData();
        
                        setTimeout(() => {
                            // Session manager removed - all features enabled by default
                        }, 1000);
                    };
        
                    const handleSessionActivated = (session) => {
                        let message;
                        if (session.type === 'demo') {
                            message = ` Demo session activated for 6 minutes. You can create invitations!`;
                        } else {
                            message = ` All security features enabled by default. You can create invitations!`;
                        }
                        
                        addMessageWithAutoScroll(message, 'system');
        
                    };
        
                    React.useEffect(() => {
                        if (connectionStatus === 'connected' && isVerified) {
                            addMessageWithAutoScroll(' Secure connection successfully established and verified! You can now communicate safely with full protection against MITM attacks and Perfect Forward Secrecy..', 'system');
        
                        }
                    }, [connectionStatus, isVerified]);
        
                    const isConnectedAndVerified = (connectionStatus === 'connected' || connectionStatus === 'verified') && isVerified;
        
                    React.useEffect(() => {
                        // All security features are enabled by default - no session activation needed
                        if (isConnectedAndVerified && pendingSession && connectionStatus !== 'failed') {
                                setPendingSession(null);
                            setSessionTimeLeft(0); 
                            addMessageWithAutoScroll(' All security features enabled by default', 'system');
                        }
                    }, [isConnectedAndVerified, pendingSession, connectionStatus]);

                    // QR Scanner initialization
                    React.useEffect(() => {
                        if (showQRScannerModal && window.Html5Qrcode) {
                            const html5Qrcode = new window.Html5Qrcode("qr-reader");
                            const config = { 
                                fps: 10
                                // Убираем qrbox чтобы использовать всю область
                            };

                            let isScanning = true;

                            html5Qrcode.start(
                                { facingMode: "environment" }, // Use back camera
                                config,
                                (decodedText, decodedResult) => {
                                    if (!isScanning) {
                                        console.log('Scanner stopped, ignoring scan');
                                        return;
                                    }
                                    
                                    console.log('QR Code scanned:', decodedText);
                                    console.log('Current buffer state:', qrChunksBufferRef.current);
                                    
                                    handleQRScan(decodedText).then((success) => {
                                        console.log('QR scan result:', success);
                                        if (success) {
                                            // Successfully processed - stop scanner and close modal
                                            console.log('Closing scanner and modal');
                                            isScanning = false;
                                            
                                            // Stop scanner first, then clear
                                            try {
                                                console.log('Stopping scanner...');
                                                html5Qrcode.stop().then(() => {
                                                    console.log('Scanner stopped, clearing...');
                                                    html5Qrcode.clear();
                                                    setShowQRScannerModal(false);
                                                }).catch((err) => {
                                                    console.log('Error stopping scanner:', err);
                                                    // Try to clear anyway
                                                    try {
                                                        html5Qrcode.clear();
                                                    } catch (clearErr) {
                                                        console.log('Error clearing scanner:', clearErr);
                                                    }
                                                    setShowQRScannerModal(false);
                                                });
                                            } catch (err) {
                                                console.log('Error in scanner cleanup:', err);
                                                setShowQRScannerModal(false);
                                            }
                                        } else {
                                            console.log('Continuing to scan for more chunks...');
                                        }
                                    }).catch((error) => {
                                        console.error('QR scan processing error:', error);
                                        // Continue scanning on error
                                    });
                                },
                                (error) => {
                                    // Ignore scanning errors - continue scanning
                                    if (isScanning) {
                                        console.log('QR scan error (ignored):', error);
                                    }
                                }
                            ).catch((err) => {
                                console.error('QR Scanner start error:', err);
                                // Close modal on start error
                                setShowQRScannerModal(false);
                            });

                            return () => {
                                isScanning = false;
                                try {
                                    // Try to stop scanner, but don't worry if it's already stopped
                                    html5Qrcode.stop().then(() => {
                                        html5Qrcode.clear();
                                    }).catch((err) => {
                                        // Scanner might already be stopped, just clear it
                                        console.log('Scanner already stopped or error stopping:', err);
                                        try {
                                            html5Qrcode.clear();
                                        } catch (clearErr) {
                                            console.log('Error clearing scanner in cleanup:', clearErr);
                                        }
                                    });
                                } catch (err) {
                                    console.log('Error in cleanup:', err);
                                    // Just try to clear, don't worry about stopping
                                    try {
                                        html5Qrcode.clear();
                                    } catch (clearErr) {
                                        console.log('Error clearing scanner in cleanup:', clearErr);
                                    }
                                }
                            };
                        }
                    }, [showQRScannerModal]);
        
                    return React.createElement('div', { 
                        className: "minimal-bg min-h-screen" 
                    }, [
                        React.createElement(EnhancedMinimalHeader, {
                            key: 'header',
                            status: connectionStatus,
                            fingerprint: keyFingerprint,
                            verificationCode: verificationCode,
                            onDisconnect: handleDisconnect,
                            isConnected: isConnectedAndVerified,
                            securityLevel: securityLevel,
                            // sessionManager removed - all features enabled by default
                            sessionTimeLeft: sessionTimeLeft,
                            webrtcManager: webrtcManagerRef.current
                        }),
        
                        React.createElement('main', {
                            key: 'main'
                        }, 
                            (() => {
                                return isConnectedAndVerified;
                            })()
                                ? (() => {
                                    return React.createElement(EnhancedChatInterface, {
                                        messages: messages,
                                        messageInput: messageInput,
                                        setMessageInput: setMessageInput,
                                        onSendMessage: handleSendMessage,
                                        onDisconnect: handleDisconnect,
                                        keyFingerprint: keyFingerprint,
                                        isVerified: isVerified,
                                        chatMessagesRef: chatMessagesRef,
                                        scrollToBottom: scrollToBottom,
                                        webrtcManager: webrtcManagerRef.current
                                    });
                                })()
                                : React.createElement(EnhancedConnectionSetup, {
                                    onCreateOffer: handleCreateOffer,
                                    onCreateAnswer: handleCreateAnswer,
                                    onConnect: handleConnect,
                                    onClearData: handleClearData,
                                    onVerifyConnection: handleVerifyConnection,
                                    connectionStatus: connectionStatus,
                                    offerData: offerData,
                                    answerData: answerData,
                                    offerInput: offerInput,
                                    setOfferInput: setOfferInput,
                                    answerInput: answerInput,
                                    setAnswerInput: setAnswerInput,
                                    showOfferStep: showOfferStep,
                                    showAnswerStep: showAnswerStep,
                                    verificationCode: verificationCode,
                                    showVerification: showVerification,
                                    showQRCode: showQRCode,
                                    qrCodeUrl: qrCodeUrl,
                                    showQRScanner: showQRScanner,
                                    setShowQRCode: setShowQRCode,
                                    setShowQRScanner: setShowQRScanner,
                                    setShowQRScannerModal: setShowQRScannerModal,
                                    messages: messages,
                                    localVerificationConfirmed: localVerificationConfirmed,
                                    remoteVerificationConfirmed: remoteVerificationConfirmed,
                                    bothVerificationsConfirmed: bothVerificationsConfirmed,
                                    // QR control props
                                    qrFramesTotal: qrFramesTotal,
                                    qrFrameIndex: qrFrameIndex,
                                    qrManualMode: qrManualMode,
                                    toggleQrManualMode: toggleQrManualMode,
                                    nextQrFrame: nextQrFrame,
                                    prevQrFrame: prevQrFrame,
                                    // PAKE passwords removed - using SAS verification instead
                                    markAnswerCreated: markAnswerCreated
                                })
                        ),
                        
                        // QR Scanner Modal
                        showQRScannerModal && React.createElement('div', {
                            key: 'qr-scanner-modal',
                            className: "fixed inset-0 bg-black/80 flex items-center justify-center z-50"
                        }, [
                            React.createElement('div', {
                                key: 'scanner-container',
                                className: "bg-gray-900 rounded-lg p-4 max-w-2xl w-full mx-4"
                            }, [
                                React.createElement('div', {
                                    key: 'scanner-header',
                                    className: "flex items-center justify-between mb-4"
                                }, [
                                    React.createElement('h3', {
                                        key: 'scanner-title',
                                        className: "text-lg font-medium text-white"
                                    }, 'QR Code Scanner'),
                                    React.createElement('button', {
                                        key: 'close-btn',
                                        onClick: () => {
                                            setShowQRScannerModal(false);
                                            // Clear QR scanner buffer
                                            qrChunksBufferRef.current = { id: null, total: 0, seen: new Set(), items: [] };
                                        },
                                        className: "text-gray-400 hover:text-white"
                                    }, [
                                        React.createElement('i', {
                                            key: 'close-icon',
                                            className: 'fas fa-times'
                                        })
                                    ])
                                ]),
                                React.createElement('div', {
                                    key: 'scanner-content',
                                    className: "text-center"
                                }, [
                                    React.createElement('p', {
                                        key: 'scanner-description',
                                        className: "text-gray-400 mb-4"
                                    }, 'Point your camera at the QR code to scan'),
                                    qrChunksBufferRef.current && qrChunksBufferRef.current.id && React.createElement('div', {
                                        key: 'progress-indicator',
                                        className: "mb-4 p-3 bg-blue-500/10 border border-blue-500/20 rounded-lg"
                                    }, [
                                        React.createElement('p', {
                                            key: 'progress-text',
                                            className: "text-blue-400 text-sm"
                                        }, `Scanned: ${qrChunksBufferRef.current.seen.size}/${qrChunksBufferRef.current.total} parts`),
                                        React.createElement('div', {
                                            key: 'progress-bar',
                                            className: "w-full bg-gray-700 rounded-full h-2 mt-2"
                                        }, [
                                            React.createElement('div', {
                                                key: 'progress-fill',
                                                className: "bg-blue-500 h-2 rounded-full transition-all duration-300",
                                                style: { 
                                                    width: `${(qrChunksBufferRef.current.seen.size / qrChunksBufferRef.current.total) * 100}%` 
                                                }
                                            })
                                        ])
                                    ]),
                                    React.createElement('div', {
                                        key: 'scanner-placeholder',
                                        id: "qr-reader",
                                        className: "w-full h-96 bg-gray-800 rounded-lg flex items-center justify-center",
                                        style: { minHeight: '400px' }
                                    }, [
                                        React.createElement('p', {
                                            key: 'scanner-placeholder-text',
                                            className: "text-gray-500"
                                        }, 'Camera will start here...')
                                    ])
                                ])
                            ])
                        ])
                        
                    ]);
                };
                function initializeApp() {
                    if (window.EnhancedSecureCryptoUtils && window.EnhancedSecureWebRTCManager) {
                        ReactDOM.render(React.createElement(EnhancedSecureP2PChat), document.getElementById('root'));
                    } else {
                        console.error('Модули не загружены:', {
                            hasCrypto: !!window.EnhancedSecureCryptoUtils,
                            hasWebRTC: !!window.EnhancedSecureWebRTCManager
                        });
                    }
                }

                if (typeof window !== 'undefined') {

                    window.addEventListener('unhandledrejection', (event) => {
                        console.error('Unhandled promise rejection:', event.reason);
                        event.preventDefault(); 
                    });
                    

                    window.addEventListener('error', (event) => {
                        console.error('Global error:', event.error);
                        event.preventDefault(); 
                    });
                    
                    if (!window.initializeApp) {
                        window.initializeApp = initializeApp;
                    }
                }
                // Render Enhanced Application
                ReactDOM.render(React.createElement(EnhancedSecureP2PChat), document.getElementById('root'));