/* All transitions use 150ms ease (defined in main.css) */

.fade-in { animation: fadeIn 150ms ease forwards; }
.slide-up { animation: slideUp 150ms ease forwards; }

/* Hover lift for cards */
.hover-lift { transition: transform var(--transition), box-shadow var(--transition); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

/* Pulse for status dots */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.status-dot.checking { animation: pulse 1s ease infinite; }

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

.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--border) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* Drag states */
.dragging { opacity: 0.5; cursor: grabbing !important; }
.drag-over { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); }

/* Collapsible sidebar transition */
#sidebar { transition: width 200ms ease; }

/* Modal animation */
.modal-overlay { animation: fadeIn 150ms ease; }
.modal { animation: slideUp 200ms ease; }

/* Notification badge pulse */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}
.badge.new { animation: badgePulse 0.5s ease 3; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Claude thinking dots */
@keyframes thinkBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}
.thinking-dot {
  width: 6px; height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: thinkBounce 1.2s ease infinite;
}
.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dot:nth-child(3) { animation-delay: 0.4s; }

/* Loading state for buttons */
.btn.loading { pointer-events: none; opacity: 0.7; }
.btn.loading::after {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 6px;
}