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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
  }

  .dark,
  .discord {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-muted;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/30;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-muted-foreground/50;
}

/* Message styling */
.message-user {
  @apply bg-primary/5 text-foreground;
}

.message-assistant {
  @apply bg-background text-foreground;
}

/* Code highlighting */
pre {
  overflow-x: auto;
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
}

/* Animation for streaming text */
@keyframes blinking-cursor {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.blinking-cursor::after {
  content: "|";
  animation: blinking-cursor 1s infinite;
  font-weight: normal;
  display: inline-block;
  margin-left: 2px;
}

/* Toast notifications */
.toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 50;
}

.toast {
  padding: 1rem;
  border-radius: var(--radius);
  @apply bg-popover text-popover-foreground shadow-lg;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease-in-out;
  max-width: 24rem;
}

.toast-success {
  border-left: 4px solid hsl(142.1, 76.2%, 36.3%);
}

.toast-error {
  border-left: 4px solid hsl(var(--destructive));
}

.toast-info {
  border-left: 4px solid hsl(221.2, 83.2%, 53.3%);
}

.toast-warning {
  border-left: 4px solid hsl(38, 92%, 50%);
}
