/* ===== Flow Node Base ===== */
.flow-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    cursor: grab;
    user-select: none;
}

.flow-node.selected {
    filter: drop-shadow(0 0 6px rgba(0, 69, 120, 0.4));
}

/* ===== Start Node ===== */
.flow-start {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #5dbf74;
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.flow-start.selected {
    box-shadow: 0 0 0 3px rgba(93, 191, 116, 0.5);
}

/* ===== End Node ===== */
.flow-end {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e53935;
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.flow-end.selected {
    box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.5);
}

/* ===== Step Node ===== */
.flow-step {
    min-width: 140px;
    max-width: 200px;
    height: 48px;
    padding: 4px 12px;
    gap: 6px;
    background: white;
    border: 2px solid #42a5f5;
    border-radius: 8px;
}

.flow-step.selected {
    border-color: #004578;
    box-shadow: 0 0 0 3px rgba(0, 69, 120, 0.2);
}

.flow-step-code {
    background: #42a5f5;
    color: white;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    white-space: nowrap;
}

.flow-step-label {
    font-size: 12px;
    color: #0f1923;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== Gateway Node ===== */
.flow-gateway {
    width: 64px;
    height: 64px;
}

.flow-gateway-diamond {
    width: 48px;
    height: 48px;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e6c54f;
    background: white;
}

.flow-condition .flow-gateway-diamond {
    border-color: #e6c54f;
}

.flow-parallel .flow-gateway-diamond {
    border-color: #0f1923;
    background: #0f1923;
}

.flow-gateway-label {
    transform: rotate(-45deg);
    font-size: 11px;
    color: #0f1923;
    white-space: nowrap;
}

.flow-parallel .flow-gateway-label {
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.flow-gateway.selected .flow-gateway-diamond {
    box-shadow: 0 0 0 3px rgba(0, 69, 120, 0.3);
}

/* ===== Toolbox Items ===== */
.flow-toolbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #e8ecf0;
    background: #f5f7f9;
    transition: background 0.15s;
}

.flow-toolbox-item:hover {
    background: #e8ecf0;
}

.flow-toolbox-step {
    border-left: 3px solid #42a5f5;
}

.flow-toolbox-condition {
    border-left: 3px solid #e6c54f;
}

.flow-toolbox-parallel {
    border-left: 3px solid #0f1923;
}

.flow-toolbox-code {
    background: #42a5f5;
    color: white;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
}

/* ===== Ports — visible on all custom flow nodes ===== */
.flow-node .diagram-port {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #c4cdd6;
    border: 2px solid white;
    box-shadow: 0 0 0 1px #c4cdd6;
    transition: all 0.15s ease;
    z-index: 10;
    cursor: crosshair;
}

.flow-node .diagram-port:hover {
    background: #42a5f5;
    box-shadow: 0 0 0 2px rgba(66, 165, 245, 0.4);
    transform: scale(1.3);
}

.flow-node .diagram-port.has-links {
    background: #42a5f5;
    box-shadow: 0 0 0 1px #42a5f5;
}

/* Position ports precisely on node edges */
.flow-node .diagram-port.top {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
}

.flow-node .diagram-port.bottom {
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
}

.flow-node .diagram-port.left {
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
}

.flow-node .diagram-port.right {
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
}

.flow-node .diagram-port.top:hover,
.flow-node .diagram-port.bottom:hover {
    transform: translateX(-50%) scale(1.3);
}

.flow-node .diagram-port.left:hover,
.flow-node .diagram-port.right:hover {
    transform: translateY(-50%) scale(1.3);
}