/* ─── Component Classes ──────────────────────────────────────────────────── */

.nav-link {
  @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 hover:text-white hover:bg-surface-800 transition-colors;
}
.nav-link.active {
  @apply text-white bg-brand-600/15 text-brand-400;
}

.stat-card {
  @apply bg-surface-800 rounded-xl p-4 border border-surface-700;
}
.stat-label {
  @apply text-xs font-medium text-gray-400 uppercase tracking-wide;
}
.stat-value {
  @apply text-2xl font-bold text-white mt-1;
}

.card {
  @apply bg-surface-800 rounded-xl p-5 border border-surface-700;
}
.card-title {
  @apply text-sm font-semibold text-gray-300 mb-3;
}

.btn-primary {
  @apply px-4 py-2 bg-brand-600 hover:bg-brand-700 text-white text-sm font-semibold rounded-lg transition focus:outline-none focus:ring-2 focus:ring-brand-500;
}
.btn-secondary {
  @apply px-4 py-2 bg-surface-700 hover:bg-surface-600 text-gray-300 text-sm font-medium rounded-lg transition focus:outline-none focus:ring-2 focus:ring-surface-500;
}
.btn-sm {
  @apply px-3 py-1.5 text-xs font-medium rounded-lg transition;
}
.btn-danger {
  @apply px-3 py-1.5 bg-red-500/15 hover:bg-red-500/25 text-red-400 text-xs font-medium rounded-lg transition;
}

.input-field {
  @apply w-full px-3 py-2 bg-surface-900 border border-surface-700 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent;
}
.input-sm {
  @apply px-2.5 py-1.5 bg-surface-900 border border-surface-700 rounded-lg text-xs text-gray-300 focus:outline-none focus:ring-2 focus:ring-brand-500;
}

/* ─── Activity Feed Items ─────────────────────────────────────────────────── */

.feed-item {
  @apply px-3 py-2 rounded-lg border border-surface-700 bg-surface-900/50;
}
.feed-item-lifecycle {
  @apply border-l-2 border-l-blue-500;
}
.feed-item-tool {
  @apply border-l-2 border-l-yellow-500;
}
.feed-item-tool-error {
  @apply border-l-2 border-l-red-500;
}
.feed-item-assistant {
  @apply border-l-2 border-l-green-500;
}
.feed-item-compaction {
  @apply border-l-2 border-l-purple-500;
}

.feed-time {
  @apply text-[10px] text-gray-500 font-mono;
}
.feed-label {
  @apply text-[11px] font-semibold uppercase tracking-wider;
}
.feed-body {
  @apply text-xs text-gray-300 mt-1;
}

/* ─── Log Colors ──────────────────────────────────────────────────────────── */

.log-info { color: #4ade80; }
.log-warn { color: #facc15; }
.log-error { color: #f87171; }
.log-debug { color: #94a3b8; }

/* ─── Context Bar ─────────────────────────────────────────────────────────── */

.context-bar {
  @apply h-2 rounded-full overflow-hidden bg-surface-700;
}
.context-fill {
  @apply h-full rounded-full transition-all duration-500;
}
.context-green { @apply bg-green-500; }
.context-yellow { @apply bg-yellow-500; }
.context-red { @apply bg-red-500; }

/* ─── Scrollbar ───────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ─── Animations ──────────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

/* Tool call expand/collapse */
.tool-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.tool-details.expanded {
  max-height: 600px;
}