/* Animation keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px currentColor);
  }
  50% {
    filter: drop-shadow(0 0 15px currentColor);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
  }
  50% {
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
  }
}

/* Badge Styles */
.badge {
  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
}

.badge.input {
  @apply bg-green-500 text-white;
}

.badge.output {
  @apply bg-red-500 text-white;
}

.badge.system {
  @apply bg-accent text-white;
}

/* Graph Styles */
#cy {
  @apply w-full h-full;
  background: #000000;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  overflow: hidden;
  touch-action: none;
}

/* Status Message Styles */
.waiting-message {
  @apply flex items-center gap-4 text-left;
}

.waiting-message i {
  @apply text-4xl text-white;
}

.waiting-message h3 {
  @apply text-xl font-medium mb-3;
}

.waiting-message p {
  @apply opacity-90 mb-2;
}

/* Events Stream Box Styles */
.events-stream-box {
  @apply absolute top-4 right-6 bg-gray-dark/90 rounded-lg shadow-lg p-4 w-80;
}

.events-list {
  @apply max-h-80 overflow-y-auto space-y-2;
}

.event-item {
  @apply bg-dark/50 p-2 rounded text-sm border-l-2 border-accent;
}

.loading-events,
.no-events,
.events-error {
  @apply text-center text-sm text-gray-400 italic p-2;
}

/* Utility Classes */
.rotating {
  animation: rotate 1.5s linear infinite;
}

/* Notification Styles */
.notification {
  @apply fixed top-6 right-6 bg-gray-dark/90 rounded-lg shadow-lg p-4 text-sm z-50 hidden;
}

.notification.success {
  @apply border-l-4 border-green-500;
}

.notification.error {
  @apply border-l-4 border-red-500;
}

.notification.info {
  @apply border-l-4 border-accent;
}

/* Box Visibility */
.hidden {
  display: none;
}

.visible {
  display: block !important;
}

/* Modern Color Palette */
:root {
  --neon-gold: #FFD700;
  --neon-pink: #FF69B4;
  --neon-blue: #00BFFF;
  --neon-green: #00FF7F;
  --neon-purple: #DA70D6;
  --neon-orange: #FF6B00;
  --pure-black: #000000;
  --glass-black: rgba(0, 0, 0, 0.8);
}

/* Team/Role Badge Styles */
.team-badge {
  @apply absolute text-xs px-2 py-1 rounded-full font-medium;
  background: var(--glass-black);
  border: 1px solid;
  backdrop-filter: blur(10px);
}

.team-badge.sales {
  color: var(--neon-gold);
  border-color: var(--neon-gold);
}

.team-badge.delivery {
  color: var(--neon-blue);
  border-color: var(--neon-blue);
}

.team-badge.insights {
  color: var(--neon-orange);
  border-color: var(--neon-orange);
}

/* Glow Effects */
.glow-gold {
  filter: drop-shadow(0 0 8px var(--neon-gold));
}

.glow-pink {
  filter: drop-shadow(0 0 8px var(--neon-pink));
}

.glow-blue {
  filter: drop-shadow(0 0 8px var(--neon-blue));
}

.glow-green {
  filter: drop-shadow(0 0 8px var(--neon-green));
}

.glow-purple {
  filter: drop-shadow(0 0 8px var(--neon-purple));
}

/* Animated Glow */
.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}