/* --- Interactive Components for NFA to RegEx Conversion --- */

/* State elimination specific styles */
.eliminable-state {
  cursor: pointer;
  transition: all 0.3s ease;
}

.eliminable-state:hover {
  filter: drop-shadow(0 0 8px #f59e0b);
  transform: scale(1.05);
}

.selected-state {
  filter: drop-shadow(0 0 12px #ef4444);
  stroke: #ef4444;
  stroke-width: 3;
}

@keyframes selectedPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.eliminated-state {
  opacity: 0.3;
  filter: grayscale(100%);
  transition: all 0.5s ease;
}

/* Edge highlighting for elimination preview */
.incoming-edge {
  stroke: #10b981 !important;
  stroke-width: 3 !important;
  animation: edgeGlow 1.5s infinite alternate;
}

.outgoing-edge {
  stroke: #f59e0b !important;
  stroke-width: 3 !important;
  animation: edgeGlow 1.5s infinite alternate;
}

.self-loop {
  stroke: #8b5cf6 !important;
  stroke-width: 3 !important;
  animation: edgeGlow 1.5s infinite alternate;
}

.new-edge {
  stroke: #ef4444 !important;
  stroke-width: 4 !important;
  stroke-dasharray: 5,5;
  animation: newEdgeAnimation 2s infinite;
}

@keyframes edgeGlow {
  from { filter: drop-shadow(0 0 3px currentColor); }
  to { filter: drop-shadow(0 0 8px currentColor); }
}

@keyframes newEdgeAnimation {
  from { 
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
  to { 
    stroke-dashoffset: 10;
    opacity: 1;
  }
}

/* Regex construction visualization */
.regex-construction {
  background: rgba(254, 249, 195, 0.9);
  border: 2px solid #f59e0b;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  font-family: 'Courier New', monospace;
  position: relative;
}

.regex-construction::before {
  content: 'Constructing...';
  position: absolute;
  top: -8px;
  left: 12px;
  background: #f59e0b;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
}

.regex-part {
  display: inline-block;
  margin: 2px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.regex-part.incoming {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
}

.regex-part.self-loop {
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid #8b5cf6;
}

.regex-part.outgoing {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid #f59e0b;
}

.regex-part.operator {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid #6366f1;
  font-weight: bold;
}

/* Step visualization */
.conversion-step {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  transition: all 0.3s ease;
  position: relative;
}

.conversion-step.active {
  border-color: #3b82f6;
  background: rgba(219, 234, 254, 0.8);
  transform: translateX(4px);
}

.conversion-step::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: #e5e7eb;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.conversion-step.active::before {
  background: #3b82f6;
  height: 80%;
}

.step-details {
  font-size: 0.85rem;
  color: #4b5563;
  margin-top: 6px;
}

.step-regex {
  font-family: 'Courier New', monospace;
  background: rgba(243, 244, 246, 0.8);
  padding: 6px 8px;
  border-radius: 4px;
  margin-top: 6px;
  font-size: 0.9rem;
  color: #1f2937;
  border-left: 3px solid #6b7280;
}

.step-regex.final {
  background: rgba(254, 249, 195, 0.8);
  border-left-color: #f59e0b;
  font-weight: 600;
}

/* Interactive feedback */
.feedback-positive {
  color: #065f46;
  background: rgba(220, 252, 231, 0.8);
  border: 1px solid #a7f3d0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 8px 0;
}

.feedback-negative {
  color: #991b1b;
  background: rgba(254, 226, 226, 0.8);
  border: 1px solid #fca5a5;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 8px 0;
}

.feedback-info {
  color: #1e40af;
  background: rgba(219, 234, 254, 0.8);
  border: 1px solid #93c5fd;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 8px 0;
}

/* Loading and transition effects */
.conversion-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(243, 244, 246, 0.8);
  border-radius: 6px;
  margin: 8px 0;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Tooltip styles for regex explanation */
.regex-tooltip {
  position: absolute;
  background: rgba(17, 24, 39, 0.95);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  max-width: 250px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.regex-tooltip.visible {
  opacity: 1;
}

.regex-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(17, 24, 39, 0.95);
}

/* Progress indicator */
.conversion-progress {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  margin: 12px 0;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 3px;
  transition: width 0.5s ease;
  width: 0%;
}

/* State and transition labels */
.state-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  fill: #1f2937;
  text-anchor: middle;
  dominant-baseline: central;
}

.transition-label {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  fill: #1f2937;
  text-anchor: middle;
  dominant-baseline: central;
  stroke: #ffffff;
  stroke-width: 3;
  paint-order: stroke fill;
}

.regex-label {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 600;
  fill: #1f2937;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Responsive adjustments for interactive elements */
@media (max-width: 768px) {
  .regex-construction {
    padding: 8px;
    font-size: 0.8rem;
  }
  
  .regex-tooltip {
    max-width: 200px;
    font-size: 0.75rem;
  }
  
  .conversion-step {
    padding: 8px;
  }
  
  .step-regex {
    font-size: 0.8rem;
  }
}