@import "tailwindcss";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --color-background: oklch(0.995 0 0);
  --color-foreground: oklch(0.235 0.015 65);
  --color-card: oklch(0.995 0 0);
  --color-card-foreground: oklch(0.235 0.015 65);
  --color-primary: oklch(0.55 0.21 259.8);
  --color-primary-foreground: oklch(1 0 0);
  --color-secondary: oklch(0.97 0.001 286.375);
  --color-secondary-foreground: oklch(0.4 0.015 65);
  --color-muted: oklch(0.96 0.001 286.375);
  --color-muted-foreground: oklch(0.6 0.015 65);
  --color-accent: oklch(0.55 0.21 259.8);
  --color-accent-foreground: oklch(1 0 0);
  --color-destructive: oklch(0.577 0.245 27.325);
  --color-destructive-foreground: oklch(1 0 0);
  --color-popover: oklch(0.995 0 0);
  --color-popover-foreground: oklch(0.235 0.015 65);
  --color-border: oklch(0.92 0.004 286.32);
  --color-input: oklch(0.92 0.004 286.32);
  --color-ring: oklch(0.55 0.21 259.8);
  --color-sidebar-background: oklch(0.995 0 0);
  --color-sidebar-foreground: oklch(0.235 0.015 65);
  --color-sidebar-primary: oklch(0.55 0.21 259.8);
  --color-sidebar-accent: oklch(0.55 0.21 259.8 / 0.1);
  --color-sidebar-border: oklch(0.92 0.004 286.32);
  --radius: 0.5rem;
}

.dark {
  --color-background: oklch(0.141 0.005 285.823);
  --color-foreground: oklch(0.85 0.005 65);
  --color-card: oklch(0.21 0.006 285.885);
  --color-card-foreground: oklch(0.85 0.005 65);
  --color-primary: oklch(0.55 0.21 259.8);
  --color-primary-foreground: oklch(1 0 0);
  --color-secondary: oklch(0.24 0.006 286.033);
  --color-secondary-foreground: oklch(0.7 0.005 65);
  --color-muted: oklch(0.274 0.006 286.033);
  --color-muted-foreground: oklch(0.705 0.015 286.067);
  --color-accent: oklch(0.55 0.21 259.8);
  --color-accent-foreground: oklch(1 0 0);
  --color-destructive: oklch(0.704 0.191 22.216);
  --color-destructive-foreground: oklch(0.985 0 0);
  --color-popover: oklch(0.21 0.006 285.885);
  --color-popover-foreground: oklch(0.85 0.005 65);
  --color-border: oklch(1 0 0 / 10%);
  --color-input: oklch(1 0 0 / 15%);
  --color-ring: oklch(0.55 0.21 259.8);
  --color-sidebar-background: oklch(0.21 0.006 285.885);
  --color-sidebar-foreground: oklch(0.85 0.005 65);
  --color-sidebar-primary: oklch(0.55 0.21 259.8);
  --color-sidebar-accent: oklch(0.55 0.21 259.8 / 0.15);
  --color-sidebar-border: oklch(1 0 0 / 10%);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    letter-spacing: -0.01em;
    line-height: 1.6;
  }
}

@layer components {
  /* Message bubbles — manus style */
  .message-bubble {
    @apply rounded-lg px-4 py-3 max-w-[80%] break-words;
  }

  /* Markdown content styling for tables, code blocks, etc. */
  .message-bubble table {
    @apply w-full border-collapse my-2 text-xs;
  }
  .message-bubble th {
    @apply border px-2 py-1 text-left font-medium bg-muted/50;
  }
  .message-bubble td {
    @apply border px-2 py-1;
  }
  .message-bubble pre {
    @apply bg-muted/50 rounded p-2 my-1 overflow-x-auto text-xs;
  }
  .message-bubble code {
    @apply bg-muted/50 rounded px-1 py-0.5 text-xs;
  }
  .message-bubble pre code {
    @apply bg-transparent p-0;
  }

  .message-bubble-user {
    @apply bg-primary text-primary-foreground ml-auto;
  }

  .message-bubble-assistant {
    @apply bg-secondary text-foreground mr-auto;
  }

  /* Loading dots pulse animation */
  @keyframes pulse-dots {
    0%, 60%, 100% { opacity: 0.4; }
    30% { opacity: 1; }
  }

  .loading-dots span {
    animation: pulse-dots 1.4s infinite;
  }

  .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
  }

  .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
  }

  /* Message enter animation */
  @keyframes messageSlideUp {
    from {
      transform: translateY(8px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .message-enter {
    animation: messageSlideUp 0.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }
}
