    (function() {
        if (window.paintopsBeforeAfterCaptureWired) return;
        window.paintopsBeforeAfterCaptureWired = true;

        var overlay = document.querySelector('.pp-after-modal-overlay');
        if (!overlay) return;

        var video = overlay.querySelector('.pp-after-video');
        var ghost = overlay.querySelector('.pp-after-ghost');
        var canvas = overlay.querySelector('.pp-after-canvas');
        var opacityInput = overlay.querySelector('.pp-after-opacity');
        var captureBtn = overlay.querySelector('.pp-after-capture');
        var cancelBtn = overlay.querySelector('.pp-after-cancel');
        var form = overlay.querySelector('.pp-after-form');
        var beforeIdField = overlay.querySelector('.pp-after-before-id');
        var fallbackInput = overlay.querySelector('.pp-after-fallback-input');
        var fallbackNote = overlay.querySelector('.pp-after-fallback-note');
        var fallbackGhost = overlay.querySelector('.pp-after-fallback-ghost');
        var stage = overlay.querySelector('.pp-after-stage');
        var currentStream = null;

        function stopStream() {
            if (currentStream) {
                currentStream.getTracks().forEach(function(track) { track.stop(); });
                currentStream = null;
            }
        }

        function closeModal() {
            stopStream();
            overlay.style.display = 'none';
        }

        function enterFallbackMode() {
            stage.style.display = 'none';
            captureBtn.style.display = 'none';
            overlay.querySelector('label').parentElement.style.display = 'none';
            fallbackNote.style.display = 'block';
            fallbackGhost.style.display = 'block';
            fallbackInput.style.display = 'inline-block';
        }

        document.addEventListener('click', function(e) {
            var trigger = e.target.closest ? e.target.closest('.pp-take-after-btn') : null;
            if (!trigger) return;
            e.preventDefault();

            var beforeId = trigger.getAttribute('data-before-id');
            var beforeUrl = trigger.getAttribute('data-before-url');
            beforeIdField.value = beforeId;
            ghost.src = beforeUrl;
            fallbackGhost.src = beforeUrl;

            // Reset to camera-preview layout each time the modal opens,
            // in case a previous open on this same page fell back.
            stage.style.display = '';
            captureBtn.style.display = '';
            var opacityRow = overlay.querySelector('label').parentElement;
            opacityRow.style.display = '';
            fallbackNote.style.display = 'none';
            fallbackGhost.style.display = 'none';
            fallbackInput.style.display = 'none';

            overlay.style.display = 'block';

            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
                enterFallbackMode();
                return;
            }

            navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }).then(function(stream) {
                currentStream = stream;
                video.srcObject = stream;
            }).catch(function() {
                enterFallbackMode();
            });
        });

        if (opacityInput) {
            opacityInput.addEventListener('input', function() {
                ghost.style.opacity = (parseInt(opacityInput.value, 10) / 100).toString();
            });
        }

        if (cancelBtn) {
            cancelBtn.addEventListener('click', function() {
                closeModal();
            });
        }

        if (captureBtn) {
            captureBtn.addEventListener('click', function() {
                if (!video.videoWidth || !video.videoHeight) return;
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                var ctx = canvas.getContext('2d');
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                canvas.toBlob(function(blob) {
                    if (!blob || typeof DataTransfer === 'undefined') return;
                    var file = new File([blob], 'after-photo.jpg', { type: 'image/jpeg' });
                    var dt = new DataTransfer();
                    dt.items.add(file);
                    fallbackInput.files = dt.files;
                    stopStream();
                    form.submit();
                }, 'image/jpeg', 0.9);
            });
        }

        // Fallback path: choosing/taking a photo through the plain file
        // input submits immediately, there's no separate Capture step
        // once a file is actually selected.
        if (fallbackInput) {
            fallbackInput.addEventListener('change', function() {
                if (fallbackInput.files && fallbackInput.files[0]) {
                    form.submit();
                }
            });
        }
    })();
