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

/* Custom styles for TCoachPilot */

@layer components {
  /* Chat message styles */
  .chat-message {
    @apply p-4 rounded-lg shadow-sm;
  }

  .chat-message-user {
    @apply bg-primary-50 border-l-4 border-primary-500;
  }

  .chat-message-assistant {
    @apply bg-gray-50 border-l-4 border-gray-400;
  }

  /* Button styles */
  .btn-primary {
    @apply text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none transition-colors;
  }

  .btn-secondary {
    @apply text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none transition-colors;
  }

  /* Sidebar styles */
  .sidebar-link {
    @apply flex items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 group transition-colors;
  }

  .sidebar-link-active {
    @apply bg-primary-50 text-primary-700;
  }

  /* Markdown prose styles for chat messages */
  .prose {
    @apply text-gray-700 leading-relaxed;
  }

  .prose p {
    @apply mb-4 last:mb-0;
  }

  .prose strong, .prose b {
    @apply font-semibold text-gray-900;
  }

  .prose em, .prose i {
    @apply italic;
  }

  .prose ul {
    @apply list-disc ml-6 mb-4 space-y-2;
  }

  .prose ol {
    @apply list-decimal ml-6 mb-4 space-y-2;
  }

  .prose li {
    @apply pl-2;
  }

  .prose li > p {
    @apply mb-2;
  }

  .prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul {
    @apply mt-2 mb-2;
  }

  .prose h1, .prose h2, .prose h3, .prose h4 {
    @apply font-semibold text-gray-900 mt-6 mb-3 first:mt-0;
  }

  .prose h1 {
    @apply text-xl;
  }

  .prose h2 {
    @apply text-lg;
  }

  .prose h3 {
    @apply text-base;
  }

  .prose code {
    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono;
  }

  .prose pre {
    @apply bg-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
  }

  .prose pre code {
    @apply bg-transparent p-0;
  }

  .prose blockquote {
    @apply border-l-4 border-gray-300 pl-4 italic text-gray-600 my-4;
  }

  .prose a {
    @apply text-primary-600 hover:underline;
  }

  .prose hr {
    @apply my-6 border-gray-200;
  }
}