@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #14161e;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #252732;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2e313d;
}

/* Glass effect */
.glass {
  background: rgba(20, 22, 30, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(34, 211, 238, 0.1);
}

.glass-dark {
  background: rgba(13, 14, 20, 0.9);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(34, 211, 238, 0.08);
}

.glass-neon {
  background: rgba(20, 22, 30, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(34, 211, 238, 0.2);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.08);
}

/* Neon glow effect */
.neon-glow {
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.4), 0 0 16px rgba(34, 211, 238, 0.2);
}

.neon-glow-purple {
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4), 0 0 16px rgba(139, 92, 246, 0.2);
}

.neon-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* Gradient border */
.gradient-border {
  position: relative;
  background: #14161e;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #22d3ee, #8b5cf6, #f472b6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
}

/* Card hover effect */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 211, 238, 0.3);
  box-shadow: 0 4px 20px rgba(34, 211, 238, 0.1);
}

/* Title bar drag region */
.titlebar {
  -webkit-app-region: drag;
}

.titlebar button {
  -webkit-app-region: no-drag;
}

/* Live indicator */
.live-indicator {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-live 2s infinite;
}

@keyframes pulse-live {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Input focus styles */
input:focus {
  outline: none;
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.1);
}

/* Selection */
::selection {
  background: rgba(34, 211, 238, 0.3);
}

/* Transition utilities */
.transition-all-300 {
  transition: all 0.3s ease;
}
