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

html {
  @apply transition-all duration-300 box-border;
}

html, body {
  @apply h-full w-full;
}

/* Fade-in animation for message preview */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 400ms ease-in-out;
}

/* Slot machine animation for counter */
@keyframes slotMachine {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(5px);
  }
}

.slot-machine-active {
  animation: slotMachine 100ms ease-in-out infinite;
  color: #3b82f6;
}

/* Neon glow animations */
@keyframes glow-breathe {
  0%, 100% {
    opacity: var(--glow-opacity-min, 0.1);
  }
  50% {
    opacity: var(--glow-opacity-max, 0.35);
  }
}

.glow-progress {
  animation: glow-breathe var(--glow-breathe-speed, 4s) ease-in-out infinite;
}

@keyframes glow-radial-pulse {
  0%, 100% {
    transform: scale(1);
    filter: blur(12px);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.04);
    filter: blur(18px);
    opacity: 0.7;
  }
}

.glow-svg-loading .glow-progress {
  animation: glow-radial-pulse 1.8s ease-in-out infinite !important;
  transform-origin: center;
}

@keyframes glow-fill-breathe {
  0%, 100% {
    transform: scale(1);
    filter: blur(12px);
    opacity: 0.05;
  }
  50% {
    transform: scale(1.03);
    filter: blur(16px);
    opacity: 0.18;
  }
}

@keyframes glow-fill-radial {
  0%, 100% {
    transform: scale(1);
    filter: blur(12px);
    opacity: 0.05;
  }
  50% {
    transform: scale(1.03);
    filter: blur(16px);
    opacity: 0.18;
  }
}

.glow-fill {
  animation: glow-fill-breathe var(--glow-breathe-speed, 4s) ease-in-out infinite;
}

.glow-svg-loading .glow-fill {
  animation: glow-fill-radial 1.8s ease-in-out infinite !important;
  transform-origin: center;
}

@keyframes border-breathe {
  0%, 100% {
    opacity: var(--border-opacity-min, 0.4);
  }
  50% {
    opacity: var(--border-opacity-max, 0.9);
  }
}

.border-progress {
  animation: border-breathe var(--border-breathe-speed, 4s) ease-in-out infinite;
}

@keyframes border-brightness-flow {
  0% {
    filter: brightness(0.7) saturate(1);
  }
  50% {
    filter: brightness(1.25) saturate(1.3);
  }
  100% {
    filter: brightness(0.7) saturate(1);
  }
}

.border-svg-loading .border-progress {
  animation: border-brightness-flow 1.5s ease-in-out infinite !important;
}

@layer utilities {
  .no-spinner::-webkit-inner-spin-button,
  .no-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  .no-spinner {
    -moz-appearance: textfield;
  }
}

/* Tooltip z-index fix for overflow containers */
.group:hover [data-tooltip-content] {
  z-index: 9999;
}

/* TooltipComponent wrapper fix - ensure full width for flex children */
.group.relative.inline-flex[data-tooltip-message] {
  display: flex;
  width: 100%;
}

.group.relative.inline-flex[data-tooltip-message] > *:first-child {
  width: 100%;
}