<script>
document.addEventListener('mousedown', function(e) {
    const modal = e.target.closest('#charppage');
    if (!modal) return;
    if (e.target.closest('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')) {
        return;
    }
    if (e.offsetX >= e.target.clientWidth || e.offsetY >= e.target.clientHeight) {
        return; 
    }
    let isDragging = false;
    let startY = e.clientY;
    const style = window.getComputedStyle(modal);
    const transformValue = style.transform !== 'none' ? style.transform : 'matrix(1, 0, 0, 1, 0, 0)';
    const matrix = new DOMMatrixReadOnly(transformValue);
    let initialTranslateY = matrix.m42 || 0;

    function onMouseMove(moveEvent) {
        if (!isDragging) {
            if (Math.abs(moveEvent.clientY - startY) > 3) {
                isDragging = true;
                modal.style.cursor = 'grabbing';
                document.body.style.cursor = 'grabbing'; 
            } else {
                return;
            }
        }
        moveEvent.preventDefault();
        const deltaY = moveEvent.clientY - startY;
        const currentTranslateY = initialTranslateY + deltaY;

        modal.style.transform = `translateX(-50%) translateY(${currentTranslateY}px)`;
    }
    function onMouseUp() {
        if (isDragging) {
            modal.style.cursor = '';
            document.body.style.cursor = '';
        }
        isDragging = false;
        window.removeEventListener('mousemove', onMouseMove);
        window.removeEventListener('mouseup', onMouseUp);
    }
    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('mouseup', onMouseUp);
});</script>