styles/globals.css

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

@layer base {
  body {
    @apply bg-gray-100 text-gray-900;
  }
}

@layer components {
  .chat-container {
    @apply flex flex-col h-screen max-w-4xl mx-auto bg-white shadow-2xl rounded-2xl overflow-hidden;
  }

  .chat-messages {
    @apply flex-1 overflow-y-auto p-6 space-y-4;
  }

  .message-user {
    @apply flex justify-end;
  }

  .message-bot {
    @apply flex justify-start;
  }

  .message-clarification {
    @apply flex justify-start bg-red-50 border border-red-100 rounded-lg p-3;
  }

  .message-content {
    @apply bg-gray-100 rounded-2xl px-4 py-3 max-w-[85%] leading-relaxed;
  }

  .message-user .message-content {
    @apply bg-brand-600 text-white rounded-br-none;
  }

  .message-bot .message-content {
    @apply bg-white border border-gray-200 text-gray-800 rounded-bl-none;
  }

  .product-card {
    @apply bg-white border border-gray-200 rounded-lg p-4 mb-3 shadow-sm hover:shadow-md transition-shadow;
  }

  .debug-panel {
    @apply bg-gray-900 text-green-400 rounded-lg p-4 font-mono text-xs overflow-x-auto;
  }
}