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

body {
  font-family: 'Inter', sans-serif;
}

#terminal {
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: #1e293b transparent;
}

#terminal::-webkit-scrollbar {
  width: 6px;
}

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

#terminal::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
}

#terminal::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Agent card ambient glow line */
.agent-card {
  position: relative;
  isolation: isolate;
}

.agent-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 10;
  border-radius: 999px;
}

.agent-card[data-status="active"]::after {
  opacity: 1;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Smooth fade-in for log lines */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

#terminal > div:not(.italic) {
  animation: fadeIn 0.2s ease-out both;
}

/* Custom select arrow */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.6rem center;
  background-repeat: no-repeat;
  background-size: 1.2em 1.2em;
  padding-right: 2.2rem;
}