/* Node Drag Preview Styles */

.node-drag-preview {
    position: fixed;
    pointer-events: none;
    z-index: 100000; /* Above everything */
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.15s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.node-drag-preview.dragging {
    opacity: 1;
    transform: scale(1);
}

.preview-icon-container {
    position: relative;
    width: 60px;
    height: 60px;
    background: transparent; /* Transparent background */
    border: none; /* No border */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* No shadow */
}

.preview-icon {
    font-size: 32px;
    color: #666; /* Gray icon */
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

.preview-invalid-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 24px;
    color: #e74c3c; /* Red forbidden icon */
    background: #ffffff;
    border-radius: 50%;
    display: none;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.preview-label {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-align: center;
    white-space: nowrap;
    background: transparent; /* Transparent background */
    padding: 4px 8px;
}

/* Can drop state - no visual change, keep gray */
.node-drag-preview.can-drop .preview-icon-container {
    /* Same gray appearance */
}

.node-drag-preview.can-drop .preview-icon {
    /* Same gray color */
}

/* Cannot drop state - only show red forbidden icon */
.node-drag-preview.cannot-drop .preview-icon-container {
    /* Keep gray background and no border */
}

.node-drag-preview.cannot-drop .preview-icon {
    /* Keep gray color */
}

.node-drag-preview.cannot-drop .preview-invalid-icon {
    display: block; /* Show red forbidden icon */
}

.node-drag-preview.cannot-drop .preview-label {
    /* Keep gray text */
}