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

:root {
  --bgBase: #09090b;
  --surface: #121214;
  --borderSubtle: #27272a;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bgBase);
  color: #d4d4d8;
  overflow: hidden;
}

/* Custom premium scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Dynamic glow overlays */
.ambient-glow {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.ambient-glow-right {
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Micro-animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.message-appear {
  animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pulseBorder {
  0%, 100% {
    border-color: var(--borderSubtle);
    box-shadow: 0 0 0 rgba(99, 102, 241, 0);
  }
  50% {
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.05);
  }
}

.active-pulse {
  animation: pulseBorder 3s infinite ease-in-out;
}

/* Glassmorphism card utility */
.glass-panel {
  background: rgba(18, 18, 20, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--borderSubtle);
}

/* Shimmer loading effect for database simulation delay */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-bg {
  background: linear-gradient(90deg, #18181b 25%, #27272a 37%, #18181b 63%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Mobile responsive navigation drawer transition */
.sidebar-transition {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}