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

@layer base {
  html {
    font-family: system-ui, sans-serif;
  }
  
  body {
    @apply bg-gray-50 text-gray-900;
  }
  
  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    body {
      @apply bg-gray-900 text-gray-100;
    }
  }
}

@layer components {
  /* Custom scrollbar */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #6b7280 #f3f4f6;
  }
  
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }
  
  /* Activity timeline */
  .activity-timeline {
    position: relative;
  }
  
  .activity-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    @apply bg-gray-200;
  }
  
  .activity-item {
    position: relative;
    padding-left: 50px;
    margin-bottom: 24px;
  }
  
  .activity-item::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    @apply bg-claude-500 border-2 border-white;
    box-shadow: 0 0 0 2px theme('colors.gray.200');
  }
  
  /* Screenshot container */
  .screenshot-container {
    @apply relative overflow-hidden rounded-lg shadow-lg;
    aspect-ratio: 4/3;
  }
  
  .screenshot-container img {
    @apply w-full h-full object-contain bg-gray-100;
  }
  
  /* Loading animations */
  .loading-dots {
    display: inline-flex;
    gap: 4px;
  }
  
  .loading-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    @apply bg-claude-500;
    animation: loading-bounce 1.4s ease-in-out infinite both;
  }
  
  .loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
  }
  
  .loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
  }
  
  @keyframes loading-bounce {
    0%, 80%, 100% {
      transform: scale(0);
    }
    40% {
      transform: scale(1);
    }
  }
  
  /* Status indicators */
  .status-active {
    @apply bg-green-100 text-green-800 border-green-200;
  }
  
  .status-inactive {
    @apply bg-gray-100 text-gray-800 border-gray-200;
  }
  
  .status-error {
    @apply bg-red-100 text-red-800 border-red-200;
  }
  
  .status-paused {
    @apply bg-yellow-100 text-yellow-800 border-yellow-200;
  }
  
  /* Chat message styles */
  .chat-message {
    @apply p-4 rounded-lg mb-4 animate-fade-in;
  }
  
  .chat-message-user {
    @apply bg-blue-50 border-l-4 border-blue-400;
  }
  
  .chat-message-assistant {
    @apply bg-claude-50 border-l-4 border-claude-400;
  }
  
  .chat-message-system {
    @apply bg-gray-50 border-l-4 border-gray-400 text-sm;
  }
  
  /* Button variants */
  .btn-primary {
    @apply bg-claude-600 hover:bg-claude-700 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium px-4 py-2 rounded-lg transition-colors duration-200;
  }
  
  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200;
  }
  
  /* Card styles */
  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
  }
  
  .card-dark {
    @apply bg-gray-800 border-gray-700;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Custom focus styles */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-claude-500 focus:ring-offset-2;
}