// ═══ PANEL RESIZER ═══
        const flowPanel = document.getElementById('flowPanel');
        const resizer = document.getElementById('panelResizer');
        const FLOW_WIDTH_KEY = 'canifa_flow_width';
        let isResizing = false;

        const savedWidth = localStorage.getItem(FLOW_WIDTH_KEY);
        if (savedWidth) flowPanel.style.width = savedWidth + 'px';

        resizer.addEventListener('mousedown', function(e) {
            isResizing = true; resizer.classList.add('dragging');
            document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none';
            e.preventDefault();
        });
        document.addEventListener('mousemove', function(e) {
            if (!isResizing) return;
            let newWidth = e.clientX - flowPanel.parentElement.getBoundingClientRect().left;
            newWidth = Math.max(180, Math.min(window.innerWidth * 0.8, newWidth));
            flowPanel.style.width = newWidth + 'px';
        });
        document.addEventListener('mouseup', function() {
            if (!isResizing) return;
            isResizing = false; resizer.classList.remove('dragging');
            document.body.style.cursor = ''; document.body.style.userSelect = '';
            localStorage.setItem(FLOW_WIDTH_KEY, parseInt(flowPanel.style.width));
        });

        // ═══ ZOOM CONTROLS ═══
        const flowContent = document.getElementById('flowContent');
        const zoomLevelEl = document.getElementById('zoomLevel');
        const ZOOM_KEY = 'canifa_flow_zoom';
        let currentZoom = parseFloat(localStorage.getItem(ZOOM_KEY)) || 1;

        function applyZoom() {
            flowContent.style.transform = 'scale(' + currentZoom + ')';
            zoomLevelEl.textContent = Math.round(currentZoom * 100) + '%';
            localStorage.setItem(ZOOM_KEY, currentZoom);
        }
        applyZoom();

        document.getElementById('zoomIn').addEventListener('click', () => { currentZoom = Math.min(2, currentZoom + 0.1); applyZoom(); });
        document.getElementById('zoomOut').addEventListener('click', () => { currentZoom = Math.max(0.5, currentZoom - 0.1); applyZoom(); });
        document.getElementById('zoomReset').addEventListener('click', () => { currentZoom = 1; applyZoom(); });

        flowPanel.addEventListener('wheel', function(e) {
            if (e.ctrlKey) { e.preventDefault(); currentZoom = e.deltaY < 0 ? Math.min(2, currentZoom + 0.05) : Math.max(0.5, currentZoom - 0.05); applyZoom(); }
        }, { passive: false });

        // ═══ CLICK NODE → SCROLL TO EXPLANATION ═══
        document.querySelectorAll('.flow-node[data-step]').forEach(node => {
            node.addEventListener('click', function() {
                const target = document.getElementById('step-' + this.dataset.step);
                if (target) {
                    document.querySelectorAll('.flow-node').forEach(n => n.classList.remove('active-step'));
                    document.querySelectorAll('.explain-card').forEach(c => c.classList.remove('highlight'));
                    this.classList.add('active-step');
                    target.classList.add('highlight');
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });

        document.querySelector('.loop-indicator').addEventListener('click', function(e) {
            if (e.target.closest('.flow-node')) return;
            const target = document.getElementById('step-5');
            if (target) {
                document.querySelectorAll('.explain-card').forEach(c => c.classList.remove('highlight'));
                target.classList.add('highlight');
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });