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

@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');

@layer base {
  * {
    @apply border-vault-border;
  }

  body {
    @apply bg-vault-dark text-vault-text font-sans antialiased;
  }

  :root {
    --color-bg: #0a0a1a;
    --color-surface: #12122a;
    --color-card: #1a1a35;
    --color-border: #2a2a50;
    --color-text: #e0e0f0;
    --color-muted: #8888aa;
    --color-primary: #6c5ce7;
    --color-primary-hover: #5a4bd1;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;
  }

  .light {
    --color-bg: #f8f9fc;
    --color-surface: #ffffff;
    --color-card: #f0f2f8;
    --color-border: #e2e4ee;
    --color-text: #1a1a2e;
    --color-muted: #6b7280;
  }
}

@layer components {
  .glass {
    @apply bg-white/5 backdrop-blur-xl border border-white/10;
  }

  .glass-card {
    @apply bg-vault-card/80 backdrop-blur-xl border border-vault-border/50 rounded-xl;
  }

  .glass-darker {
    @apply bg-vault-darker/80 backdrop-blur-xl border border-vault-border/30 rounded-xl;
  }

  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-medium px-4 py-2 rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply glass-card hover:bg-vault-card text-vault-text font-medium px-4 py-2 rounded-lg transition-all duration-200;
  }

  .btn-danger {
    @apply bg-red-500/10 hover:bg-red-500/20 text-red-400 font-medium px-4 py-2 rounded-lg transition-all duration-200;
  }

  .input-field {
    @apply w-full bg-vault-surface border border-vault-border rounded-lg px-4 py-2.5 text-vault-text placeholder-vault-muted/50 focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500 transition-all duration-200;
  }

  .card {
    @apply glass-card p-6 transition-all duration-200 hover:border-primary-500/20;
  }

  .sidebar-item {
    @apply flex items-center gap-3 px-3 py-2 rounded-lg text-vault-muted hover:text-vault-text hover:bg-vault-surface/50 transition-all duration-200 cursor-pointer;
  }

  .sidebar-item.active {
    @apply bg-primary-500/10 text-primary-400 border border-primary-500/20;
  }

  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 92, 231, 0.3) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 4px;
  }

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

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(108, 92, 231, 0.3);
    border-radius: 4px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 92, 231, 0.5);
  }

  .skeleton {
    @apply bg-vault-surface/50 rounded-lg animate-pulse;
    background: linear-gradient(90deg, rgba(26, 26, 53, 0.5) 25%, rgba(42, 42, 80, 0.5) 50%, rgba(26, 26, 53, 0.5) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
  }

  .status-dot {
    @apply w-2.5 h-2.5 rounded-full border-2 border-vault-dark;
  }

  .message-preview {
    @apply text-sm text-vault-muted truncate;
  }

  .typing-indicator {
    @apply flex items-center gap-1 px-2 py-1;
  }

  .typing-indicator span {
    @apply w-1.5 h-1.5 bg-vault-muted rounded-full;
    animation: typing 1.4s ease-in-out infinite;
  }

  .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
  .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
}

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Markdown styles */
.markdown-content h1 { @apply text-2xl font-bold mb-3; }
.markdown-content h2 { @apply text-xl font-bold mb-2; }
.markdown-content h3 { @apply text-lg font-semibold mb-2; }
.markdown-content p { @apply mb-2 leading-relaxed; }
.markdown-content ul { @apply list-disc list-inside mb-2; }
.markdown-content ol { @apply list-decimal list-inside mb-2; }
.markdown-content blockquote { @apply border-l-4 border-primary-500/50 pl-4 italic text-vault-muted mb-2; }
.markdown-content code { @apply bg-vault-surface px-1.5 py-0.5 rounded text-sm font-mono text-primary-300; }
.markdown-content pre { @apply bg-vault-darker p-4 rounded-lg overflow-x-auto mb-3; }
.markdown-content pre code { @apply bg-transparent p-0 text-sm; }
.markdown-content table { @apply w-full mb-3 border-collapse; }
.markdown-content th { @apply bg-vault-surface border border-vault-border px-3 py-2 text-left font-medium; }
.markdown-content td { @apply border border-vault-border px-3 py-2; }
.markdown-content a { @apply text-primary-400 hover:text-primary-300 underline; }
.markdown-content input[type="checkbox"] { @apply mr-2 accent-primary-500; }

/* React Photo View overrides */
.PhotoView__Photo { @apply rounded-lg; }
.PhotoView-Slider__BannerRight { @apply text-vault-text; }