/* Custom Styles & Glassmorphic Utilities for Queue Without the Queue */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  --bg-dark: #0f172a;
  --bg-card: rgba(30, 41, 59, 0.7);
  --bg-card-border: rgba(255, 255, 255, 0.1);
  --primary-accent: #3b82f6;
  --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --emerald-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --amber-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --rose-gradient: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-dark);
  color: #f8fafc;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-heading {
  font-family: 'Outfit', sans-serif;
}

/* Glassmorphism Cards */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bg-card-border);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-panel-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel-hover:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px 0 rgba(99, 102, 241, 0.15);
}

.glass-input {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transition: all 0.2s ease;
}

.glass-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* Digital Token Badge */
.token-badge {
  background: var(--primary-gradient);
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.token-badge-priority {
  background: var(--rose-gradient);
  box-shadow: 0 4px 20px rgba(244, 63, 94, 0.4);
}

.token-badge-express {
  background: var(--emerald-gradient);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

/* Pulsing Calling Effect */
@keyframes callingPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(245, 158, 11, 0);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    transform: scale(1);
  }
}

.calling-card {
  animation: callingPulse 2s infinite ease-in-out;
  border-color: #f59e0b !important;
}

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

::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.5);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* Voice Wave Animation */
@keyframes waveBar {
  0%, 100% { height: 6px; }
  50% { height: 24px; }
}

.voice-bar {
  width: 4px;
  background-color: #6366f1;
  border-radius: 2px;
  animation: waveBar 1.2s infinite ease-in-out;
}

.voice-bar:nth-child(2) { animation-delay: 0.2s; }
.voice-bar:nth-child(3) { animation-delay: 0.4s; }
.voice-bar:nth-child(4) { animation-delay: 0.1s; }
.voice-bar:nth-child(5) { animation-delay: 0.3s; }