<div id="diagramContainer" class="border p-2" style="min-height:200px; position:relative; background:#fff; overflow:auto;">
    <div id="diagramDropZone" class="text-center text-muted py-4">
        <i class="bi bi-arrow-down-circle display-6 d-block mb-2"></i>
        <p class="small">Drag tables from the left panel here to add them to the query.</p>
    </div>
    <!-- SVG overlay for JOIN arrows (reusing our relation-arrow technology) -->
    <svg id="joinArrowsSvg" style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:10;"></svg>
</div>