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

@layer base {
  * {
    @apply border-gray-800;
  }

  body {
    @apply bg-gray-950 text-gray-100 antialiased;
  }

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

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-gray-700/50 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-600/70;
  }
}

@layer components {
  .btn-primary {
    @apply bg-plutus-600 hover:bg-plutus-700 text-white px-4 py-2 rounded-lg
           font-medium transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply bg-gray-800 hover:bg-gray-700 text-gray-200 px-4 py-2 rounded-lg
           font-medium transition-colors duration-150;
  }

  .btn-danger {
    @apply bg-red-600/20 hover:bg-red-600/30 text-red-400 px-4 py-2 rounded-lg
           font-medium transition-colors duration-150;
  }

  .btn-success {
    @apply bg-emerald-600/20 hover:bg-emerald-600/30 text-emerald-400 px-4 py-2 rounded-lg
           font-medium transition-colors duration-150;
  }

  .card {
    @apply bg-gray-900 border border-gray-800 rounded-xl p-4;
  }

  .input {
    @apply bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100
           placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-plutus-500/50
           focus:border-plutus-500 transition-all duration-150 w-full;
  }
}

/* Typing animation */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  @apply text-plutus-400 ml-0.5;
}

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

.animate-fade-in {
  animation: fadeIn 0.25s ease-out;
}

/* Slide-up animation for messages */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pulse for pending approvals */
@keyframes gentle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.animate-gentle-pulse {
  animation: gentle-pulse 2s ease-in-out infinite;
}

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

.animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(92, 124, 250, 0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

/* Dot pulse for typing indicator */
@keyframes dotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.dot-pulse span:nth-child(1) { animation: dotPulse 1.4s ease-in-out infinite; }
.dot-pulse span:nth-child(2) { animation: dotPulse 1.4s ease-in-out 0.2s infinite; }
.dot-pulse span:nth-child(3) { animation: dotPulse 1.4s ease-in-out 0.4s infinite; }

/* Chat messages area - subtle top/bottom fade */
.chat-messages {
  mask-image: linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%);
}

/* Sidebar scroll — thinner, auto-hide */
.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  @apply bg-gray-700/30 rounded-full;
}

.sidebar-scroll:hover::-webkit-scrollbar-thumb {
  @apply bg-gray-600/50;
}

/* Conversation item transitions */
.conv-item {
  transition: all 0.15s ease;
}

/* Active conversation glow */
.conv-active {
  box-shadow: inset 0 0 0 1px rgba(92, 124, 250, 0.08);
}

/* Smooth scroll behavior */
.scroll-smooth {
  scroll-behavior: smooth;
}

/* Onboarding wizard step entrance */
@keyframes onboardIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.animate-onboard-in {
  animation: onboardIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
