@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: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --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: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .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: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --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: 224.3 76.3% 94.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom scrollbar */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground)) transparent;
}

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

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

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

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--foreground));
}

/* Chat animations */
.message-enter {
  animation: fade-in 0.3s ease-out;
}

.typing-indicator {
  animation: typing 1.5s infinite;
}

.typing-indicator::after {
  content: '|';
  animation: blink 1s infinite;
}

/* Gradient backgrounds */
.gradient-bg {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
}

.gradient-text {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* File upload area */
.upload-area {
  border: 2px dashed hsl(var(--border));
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.05);
}

.upload-area.drag-over {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary) / 0.1);
}

/* Code syntax highlighting */
.code-block {
  @apply bg-muted rounded-md p-4 overflow-x-auto;
}

.code-block pre {
  @apply m-0;
}

.code-block code {
  @apply text-sm font-mono;
}

/* Loading spinner */
.spinner {
  border: 2px solid hsl(var(--muted));
  border-top: 2px solid hsl(var(--primary));
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Thinking animations */
.thinking-brain {
  animation: thinking-brain-fade 2s ease-in-out infinite;
}

.thinking-text {
  animation: thinking-text-fade 1.8s ease-in-out infinite;
}

.thinking-dots {
  animation: thinking-dots 1.2s ease-in-out infinite;
}

.thinking-dot-1 {
  animation: thinking-dot 1.4s ease-in-out infinite;
  animation-delay: 0s;
}

.thinking-dot-2 {
  animation: thinking-dot 1.4s ease-in-out infinite;
  animation-delay: 0.2s;
}

.thinking-dot-3 {
  animation: thinking-dot 1.4s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes thinking-brain-fade {
  0%, 100% { 
    opacity: 0.3;
    transform: scale(0.95);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1);
  }
}

@keyframes thinking-text-fade {
  0%, 100% { 
    opacity: 0.5;
  }
  50% { 
    opacity: 0.9;
  }
}

@keyframes thinking-dot {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes thinking-dots {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

@keyframes thinking-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@keyframes thinking-dots-animation {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
  100% { content: "."; }
}

@layer utilities {
  .animate-thinking-pulse {
    animation: thinking-pulse 2s ease-in-out infinite;
  }
  
  .animate-thinking-dots::after {
    content: ".";
    animation: thinking-dots-animation 1.5s steps(1) infinite;
  }
}

/* Response content overflow prevention */
.response-content {
  /* Prevent horizontal overflow */
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* HTML content specific styles */
.response-content * {
  max-width: 100% !important;
  box-sizing: border-box;
}

.response-content pre {
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.response-content code {
  word-break: break-all;
  white-space: pre-wrap;
}

.response-content table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.response-content td, .response-content th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 0;
}

.response-content img, .response-content video {
  max-width: 100% !important;
  height: auto !important;
}

/* Prevent content from expanding sidebar or container */
.message-container {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
