/* Canvas Styles */
#drawflow {
    background-color: #f8fafc;
    background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);
    background-size: 20px 20px;
    background-position: 0 0;
    width: 100%;
    height: 100%;
    position: relative;
    user-select: none;
}

/* Connection curves */
.drawflow .connection .main-path {
    stroke: #64748b;
    stroke-width: 3px;
    transition: stroke 0.15s, stroke-width 0.15s;
}

.drawflow .connection .main-path:hover {
    stroke: #206bc4;
    stroke-width: 4px;
}

.drawflow .connection .main-path.selected {
    stroke: #206bc4;
    stroke-width: 4px;
    stroke-dasharray: 4;
    animation: dash 1s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -20;
    }
}

/* Ports (inputs/outputs) */
.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
    width: 12px;
    height: 12px;
    border: 2.5px solid #fff;
    background: #475569;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 0.1s, background 0.1s;
}

.drawflow .drawflow-node .input:hover,
.drawflow .drawflow-node .output:hover {
    transform: scale(1.3);
    background: #206bc4;
}

.drawflow .drawflow-node .input {
    left: -6px;
}

.drawflow .drawflow-node .output {
    right: -6px;
}

/* Main Node Styles */
.drawflow .drawflow-node {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04), 0 1px 4px rgba(15, 23, 42, 0.02);
    border-radius: 8px;
    padding: 0;
    min-width: 180px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.drawflow .drawflow-node:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.drawflow .drawflow-node.selected {
    border-color: #206bc4 !important;
    box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.18), 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* Custom internal content for Visual Nodes */
.drawflow-node-content {
    display: flex;
    align-items: center;
    padding: 10px 14px;
}

.drawflow-node-content i {
    font-size: 20px;
    margin-right: 10px;
}

.drawflow-node-content .node-info {
    flex-fill: 1;
}

.drawflow-node-content .node-title {
    font-weight: 600;
    font-size: 13.5px;
    color: #1e293b;
    margin-bottom: 2px;
}

.drawflow-node-content .node-subtitle {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Category coloring borders */
.drawflow-node.start { border-left: 5px solid #2fb344; }
.drawflow-node.end { border-left: 5px solid #d63939; }
.drawflow-node.form { border-left: 5px solid #206bc4; }
.drawflow-node.approval { border-left: 5px solid #a239ca; }
.drawflow-node.if { border-left: 5px solid #f59f00; }
.drawflow-node.python { border-left: 5px solid #f1c40f; }
.drawflow-node.sql { border-left: 5px solid #34495e; }
.drawflow-node.rest { border-left: 5px solid #1abc9c; }
.drawflow-node.ai_agent { border-left: 5px solid #6366f1; }
.drawflow-node.rabbitmq { border-left: 5px solid #ec4899; }
.drawflow-node.whatsapp { border-left: 5px solid #14b8a6; }
.drawflow-node.email { border-left: 5px solid #0ea5e9; }
.drawflow-node.wait { border-left: 5px solid #64748b; }

/* Canvas Controls overlay */
.canvas-controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 6px;
    z-index: 10;
    background: white;
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
}

/* Sidebar Draggable Cards */
.drag-item {
    padding: 10px 12px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: grab;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: background 0.15s, transform 0.1s;
}

.drag-item:hover {
    transform: translateX(2px);
}

.drag-item:active {
    cursor: grabbing;
}