/* shadcn/ui Design System + Custom Styles */

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

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 235 58% 20%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 235 58% 20%;

    --radius: 0.5rem;

    --chat-user-bg: 235 58% 20%;
    --chat-user-fg: 210 40% 98%;
    --chat-ai-bg: 0 0% 98%;
    --chat-ai-fg: 222.2 84% 4.9%;
    --chat-hover: 210 40% 96.1%;

    /* Gradients */
    --gradient-primary: linear-gradient(
      135deg,
      hsl(235 58% 20%) 0%,
      hsl(233 51% 62%) 100%
    );
    --gradient-secondary: linear-gradient(
      135deg,
      hsl(222 62% 75%) 0%,
      hsl(220 40% 98%) 100%
    );
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 226 71% 77%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 235 58% 25%;

    --chat-user-bg: 235 58% 25%;
    --chat-user-fg: 222.2 47.4% 11.2%;
    --chat-ai-bg: 217.2 32.6% 17.5%;
    --chat-ai-fg: 210 40% 98%;
    --chat-hover: 217.2 32.6% 20%;
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-family:
      'Inter',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-semibold tracking-tight;
  }
}

/* Custom animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Message animations */
.message-enter {
  animation: slideIn 0.3s ease-out;
}

.message-user {
  animation: slideInFromLeft 0.3s ease-out;
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: hsl(var(--muted));
  border-radius: var(--radius);
  width: fit-content;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--muted-foreground));
  animation: pulse 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;
}

/* Scrollbar styling */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Glassmorphism effect */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dark .gradient-text {
  @apply bg-clip-text text-transparent;
  background-image: var(--gradient-secondary);
}
/* Hover effects */
.hover-lift {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Code blocks */
.markdown-body pre {
  @apply bg-muted rounded-lg p-4 overflow-x-auto my-3;
  position: relative;
  border: 1px solid hsl(var(--border));
}

.markdown-body code {
  @apply text-sm font-mono;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 0.875em;
}

.markdown-body pre code {
  @apply bg-transparent p-0;
  color: hsl(var(--foreground));
  line-height: 1.6;
}

.markdown-body p code {
  @apply bg-muted px-1.5 py-0.5 rounded text-sm;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-weight: 500;
}

/* Inline code in lists */
.markdown-body li code {
  @apply bg-muted px-1.5 py-0.5 rounded text-sm;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}

/* Code block language label */
.markdown-body pre[class*='language-']::before {
  content: attr(class);
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  border-bottom-left-radius: 0.375rem;
}

/* Copy button for code blocks */
.code-block-wrapper {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.code-block-wrapper:hover .copy-button {
  opacity: 1;
}

/* Chat message styles */
.chat-message {
  @apply flex items-start mb-4;
  animation: slideIn 0.3s ease-out;
}

.chat-message.ai {
  @apply gap-3;
}

.chat-message.user {
  @apply flex-row-reverse;
}

.message-bubble {
  @apply max-w-[70%] shadow-sm;
  word-wrap: break-word;
}

.message-bubble.user {
  @apply bg-muted text-foreground;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  padding: 12px 16px;
  border-radius: 16px;
}

.message-bubble.ai {
  @apply bg-card border border-border;
  padding: 12px 16px;
  border-radius: 16px;
}

/* Better markdown formatting for AI responses */
.message-bubble.ai .prose {
  @apply max-w-none;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Ensure proper spacing for all elements */
.message-bubble.ai .prose > *:first-child {
  margin-top: 0 !important;
}

.message-bubble.ai .prose > *:last-child {
  margin-bottom: 0 !important;
}

/* Strong and emphasis */
.message-bubble.ai .prose strong {
  @apply font-semibold;
  color: hsl(var(--foreground));
}

.message-bubble.ai .prose em {
  @apply italic;
}

/* Horizontal rule */
.message-bubble.ai .prose hr {
  @apply my-4 border-border;
}

/* Links */
.message-bubble.ai .prose a {
  @apply text-primary underline;
}

.message-bubble.ai .prose a:hover {
  @apply text-primary/80;
}

/* Striped table rows */
.message-bubble.ai .prose tr:nth-child(even) {
  @apply bg-muted/50;
}

/* Avatar styles */
.avatar {
  @apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar img {
  @apply aspect-square h-full w-full object-cover;
}

.avatar-fallback {
  @apply flex h-full w-full items-center justify-center rounded-full text-sm font-medium;
  background: linear-gradient(
    135deg,
    hsl(var(--primary)) 0%,
    hsl(var(--primary) / 0.8) 100%
  );
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* AI Avatar specific styling */
.chat-message.ai .avatar-fallback {
  background: linear-gradient(
    135deg,
    hsl(var(--primary)) 0%,
    hsl(var(--primary) / 0.7) 100%
  );
  border: 2px solid hsl(var(--primary) / 0.2);
  box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);
}

/* Chat list item - Professional padding */
.chat-list-item {
  @apply flex items-center gap-2 rounded-lg cursor-pointer transition-all;
  @apply hover:bg-accent relative;
  padding: 10px 12px;
  border-left: 3px solid transparent;
  margin-bottom: 2px;
}

.chat-list-item:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chat-list-item.active {
  @apply bg-accent;
  border-left-color: hsl(var(--primary));
  background: linear-gradient(
    90deg,
    hsl(var(--accent)) 0%,
    hsl(var(--background)) 100%
  );
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.dark .chat-list-item.active {
  background: linear-gradient(
    90deg,
    hsl(var(--accent)) 0%,
    hsl(var(--background)) 100%
  );
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Show actions on hover */
.chat-list-item:hover .chat-actions {
  @apply opacity-100 visible;
}

/* Hide actions by default */
.chat-actions {
  @apply opacity-0 invisible transition-all duration-200;
}

/* Chat menu dropdown (sidebar) */
.chat-menu {
  animation: slideDown 0.15s ease-out;
  z-index: 40; /* Below modals (z-50) but above normal content */
}

/* Chat options menu (header) */
#chatOptionsMenu:not(.hidden) {
  animation: slideDown 0.15s ease-out;
  z-index: 40; /* Below modals (z-50) but above normal content */
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-menu button,
#chatOptionsMenu button {
  transition: all 0.15s ease;
  text-align: left;
  font-size: 0.8125rem; /* 13px - smaller font */
  padding: 0.5rem 0.75rem; /* Reduced padding */
}

.chat-menu button:active,
#chatOptionsMenu button:active {
  transform: scale(0.98);
}

.chat-menu button i,
#chatOptionsMenu button i {
  font-size: 0.75rem; /* 12px - smaller icons */
}

/* Chat list title styling - Smaller fonts */
.chat-list-item .chat-title {
  @apply font-medium truncate;
  color: hsl(var(--foreground));
  font-size: 0.8125rem; /* 13px */
  line-height: 1.3;
}

.chat-list-item .chat-domain {
  @apply truncate flex items-center gap-1;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem; /* 11px */
}

.chat-list-item .chat-time {
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem; /* 11px */
  white-space: nowrap;
}

/* Chat list section headers - More compact */
.chat-section-header {
  @apply px-3 py-1.5 font-semibold uppercase tracking-wider;
  color: hsl(var(--muted-foreground));
  font-size: 0.625rem; /* 10px */
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

/* Message preview in chat list */
.chat-list-item .chat-message-preview {
  @apply truncate;
  color: hsl(var(--muted-foreground));
  opacity: 0.7;
  font-size: 0.6875rem; /* 11px */
  line-height: 1.3;
  margin-top: 2px;
}

/* Input area */
.chat-input-container {
  @apply border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60;
}

/* Mobile sidebar */
@media (max-width: 1023px) {
  #sidebar {
    height: calc(100vh - 4rem); /* Account for header height */
    top: 4rem;
  }
}

/* Modal backdrop */
.modal-backdrop {
  @apply fixed inset-0 z-50 bg-background/80 backdrop-blur-sm;
  animation: fadeIn 0.2s ease-out;
}

/* Shimmer loading effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(
    to right,
    hsl(var(--muted)) 0%,
    hsl(var(--muted-foreground) / 0.1) 50%,
    hsl(var(--muted)) 100%
  );
  background-size: 1000px 100%;
}

/* Utility classes */
.text-balance {
  text-wrap: balance;
}

.transition-base {
  @apply transition-all duration-200 ease-in-out;
}