/* Flow Viewer - Highlighting and Read-Only Styles */

/* Highlighted node styling - pulsing glow effect */
/* IMPORTANT: Never use 'transform' property as ReactFlow uses it for positioning */
.flow-node-highlighted {
    /* Use filter for glow that respects border-radius */
    filter: drop-shadow(0 0 4px rgba(13, 110, 253, 0.8))
            drop-shadow(0 0 7px rgba(13, 110, 253, 0.6));
    animation: pulse-glow 2s infinite ease-in-out;
    z-index: 1000 !important;
}

.flow-node-highlighted-inactive {
    /* Use filter for glow that respects border-radius */
    filter: drop-shadow(0 0 2px rgba(220, 53, 69, 0.8))
            drop-shadow(0 0 3.5px rgba(220, 53, 69, 0.6));
    animation: pulse-glow-red 2s infinite ease-in-out;
    z-index: 1000 !important;
}

@keyframes pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(13, 110, 253, 0.8))
                drop-shadow(0 0 7px rgba(13, 110, 253, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 7px rgba(13, 110, 253, 1))
                drop-shadow(0 0 11px rgba(13, 110, 253, 0.8))
                drop-shadow(0 0 15px rgba(13, 110, 253, 0.6));
    }
}

@keyframes pulse-glow-red {
    0%, 100% {
        filter: drop-shadow(0 0 2px rgba(220, 53, 69, 0.8))
                drop-shadow(0 0 3.5px rgba(220, 53, 69, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 3.5px rgba(220, 53, 69, 1))
                drop-shadow(0 0 5.5px rgba(220, 53, 69, 0.8))
                drop-shadow(0 0 7.5px rgba(220, 53, 69, 0.6));
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .flow-node-highlighted {
        filter: drop-shadow(0 0 4px rgba(110, 168, 254, 0.8))
                drop-shadow(0 0 7px rgba(110, 168, 254, 0.6));
    }

    @keyframes pulse-glow {
        0%, 100% {
            filter: drop-shadow(0 0 4px rgba(110, 168, 254, 0.8))
                    drop-shadow(0 0 7px rgba(110, 168, 254, 0.6));
        }
        50% {
            filter: drop-shadow(0 0 7px rgba(110, 168, 254, 1))
                    drop-shadow(0 0 11px rgba(110, 168, 254, 0.8))
                    drop-shadow(0 0 15px rgba(110, 168, 254, 0.6));
        }
    }
}

/* Reduce animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .flow-node-highlighted {
        animation: none;
        filter: drop-shadow(0 0 5px rgba(13, 110, 253, 1))
                drop-shadow(0 0 9px rgba(13, 110, 253, 0.8));
    }
}

/* Make sure highlighted node is always visible in minimap */
.react-flow__minimap-node.flow-node-highlighted {
    fill: #0d6efd !important;
    stroke: #0d6efd !important;
    stroke-width: 2px;
}