/* Markdown Content Styles - Clean and Professional */

.markdown-content {
  @apply text-gray-800 dark:text-white leading-relaxed;
  word-break: break-word;
}

/* Ensure all text elements are white in dark mode (except code blocks which have their own styling) */
.dark .markdown-content {
  color: #ffffff !important;
}

/* Ensure spans and other inline elements are white in dark mode */
.dark .markdown-content span:not(.highlight *):not(code *) {
  color: #ffffff !important;
}

/* Clean Headings */
.markdown-content h1 {
  @apply text-4xl font-bold mt-0 mb-6 leading-tight;
  color: #111827 !important; /* gray-900 */
}
.dark .markdown-content h1 {
  color: #ffffff !important; /* white */
}

.markdown-content h2 {
  @apply text-3xl font-bold mt-10 mb-4 leading-tight;
  color: #1f2937 !important; /* gray-800 */
}
.dark .markdown-content h2 {
  color: #ffffff !important; /* white */
}

.markdown-content h3 {
  @apply text-2xl font-semibold mt-8 mb-3 leading-normal;
  color: #374151 !important; /* gray-700 */
}
.dark .markdown-content h3 {
  color: #ffffff !important; /* white */
}

.markdown-content h4 {
  @apply text-xl font-semibold mt-6 mb-2;
  color: #4b5563 !important; /* gray-600 */
}
.dark .markdown-content h4 {
  color: #ffffff !important; /* white */
}

.markdown-content p {
  @apply mb-4;
  color: #1f2937 !important; /* gray-800 */
}
.dark .markdown-content p {
  color: #ffffff !important; /* white */
}

/* Inline code - subtle */
.markdown-content code:not(pre code) {
  background-color: #f3f4f6 !important; /* gray-100 */
  color: #dc2626 !important; /* red-600 */
  @apply rounded px-1.5 py-0.5 text-sm font-mono;
  border: none !important;
  padding: 0.125rem 0.375rem !important;
}
.dark .markdown-content code:not(pre code) {
  background-color: #374151 !important; /* gray-700 */
  color: #ffffff !important; /* white */
}

/* Code blocks - dark background with syntax highlighting */
.markdown-content pre {
  background-color: #1f2937 !important; /* gray-800 */
  @apply rounded-lg m-0 overflow-x-auto;
  padding: 1rem 1.25rem !important; /* py-4 px-5 */
  border: 1px solid #374151 !important; /* gray-700 */
  line-height: 1.6;
  max-width: 100%;
}

.dark .markdown-content pre {
  background-color: #111827 !important; /* gray-900 */
  border-color: #374151 !important; /* gray-700 */
}

/* Code block wrapper for copy button */
.markdown-content .code-block-wrapper {
  @apply relative mb-6;
  background-color: transparent;
}

.markdown-content .code-block-wrapper pre {
  margin-top: 0;
  border-radius: 0.5rem;
}

.markdown-content .code-block-wrapper .copy-code-btn {
  transition: all 0.2s;
}

.markdown-content pre code {
  background-color: transparent !important;
  color: #e5e7eb !important; /* gray-200 */
  @apply rounded-none text-sm font-mono leading-relaxed;
  padding: 0 !important;
  border: none !important;
  display: block;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}

/* Rouge syntax highlighting - subtle and readable */
.markdown-content .highlight {
  background-color: #1f2937 !important; /* gray-800 */
  @apply rounded-lg overflow-hidden;
  border: 1px solid #374151 !important; /* gray-700 */
  padding: 1rem 1.25rem !important;
  margin: 0 !important;
  max-width: 100%;
}

.dark .markdown-content .highlight {
  background-color: #111827 !important; /* gray-900 */
  border-color: #374151 !important; /* gray-700 */
}

.markdown-content .highlight pre {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Syntax highlighting - subtle colors on dark background */
.markdown-content .highlight .c { color: #9ca3af; font-style: italic; } /* Comments - gray */
.markdown-content .highlight .err { color: #ef4444; } /* Errors - red */
.markdown-content .highlight .k { color: #a78bfa; } /* Keywords - purple */
.markdown-content .highlight .l { color: #fbbf24; } /* Literals - amber */
.markdown-content .highlight .n { color: #e5e7eb; } /* Names - light gray */
.markdown-content .highlight .o { color: #d1d5db; } /* Operators - gray */
.markdown-content .highlight .p { color: #d1d5db; } /* Punctuation - gray */
.markdown-content .highlight .cm { color: #9ca3af; font-style: italic; }
.markdown-content .highlight .cp { color: #9ca3af; font-style: italic; }
.markdown-content .highlight .c1 { color: #9ca3af; font-style: italic; }
.markdown-content .highlight .cs { color: #9ca3af; font-style: italic; }
.markdown-content .highlight .kc { color: #60a5fa; } /* Keyword constant - blue */
.markdown-content .highlight .kd { color: #a78bfa; } /* Keyword declaration - purple */
.markdown-content .highlight .kn { color: #a78bfa; }
.markdown-content .highlight .kp { color: #a78bfa; }
.markdown-content .highlight .kr { color: #a78bfa; }
.markdown-content .highlight .kt { color: #34d399; } /* Keyword type - emerald */
.markdown-content .highlight .m { color: #34d399; } /* Literal number - emerald */
.markdown-content .highlight .s { color: #f59e0b; } /* Literal string - amber */
.markdown-content .highlight .na { color: #60a5fa; } /* Name attribute - blue */
.markdown-content .highlight .nb { color: #e5e7eb; }
.markdown-content .highlight .nc { color: #34d399; } /* Name class - emerald */
.markdown-content .highlight .no { color: #60a5fa; }
.markdown-content .highlight .nd { color: #34d399; }
.markdown-content .highlight .nf { color: #fbbf24; } /* Name function - amber */
.markdown-content .highlight .nt { color: #60a5fa; } /* Name tag - blue */
.markdown-content .highlight .nv { color: #60a5fa; } /* Name variable - blue */
.markdown-content .highlight .ow { color: #d1d5db; }
.markdown-content .highlight .w { color: #d1d5db; }
.markdown-content .highlight .mf { color: #34d399; }
.markdown-content .highlight .mh { color: #34d399; }
.markdown-content .highlight .mi { color: #34d399; }
.markdown-content .highlight .mo { color: #34d399; }
.markdown-content .highlight .sb { color: #f59e0b; }
.markdown-content .highlight .sc { color: #f59e0b; }
.markdown-content .highlight .sd { color: #f59e0b; }
.markdown-content .highlight .s2 { color: #f59e0b; }
.markdown-content .highlight .se { color: #f59e0b; }
.markdown-content .highlight .sh { color: #f59e0b; }
.markdown-content .highlight .si { color: #f59e0b; }
.markdown-content .highlight .sx { color: #f59e0b; }
.markdown-content .highlight .sr { color: #f59e0b; }
.markdown-content .highlight .s1 { color: #f59e0b; }
.markdown-content .highlight .ss { color: #f59e0b; }
.markdown-content .highlight .bp { color: #e5e7eb; }
.markdown-content .highlight .vc { color: #60a5fa; }
.markdown-content .highlight .vg { color: #60a5fa; }
.markdown-content .highlight .vi { color: #60a5fa; }
.markdown-content .highlight .il { color: #34d399; }

/* Clean blockquotes */
.markdown-content blockquote {
  border-left: 4px solid #d1d5db !important; /* gray-300 */
  background-color: #f9fafb !important; /* gray-50 */
  color: #4b5563 !important; /* gray-600 */
  @apply py-4 px-6 my-6 italic rounded;
}
.dark .markdown-content blockquote {
  border-left-color: #4b5563 !important; /* gray-600 */
  background-color: #1f2937 !important; /* gray-800 */
  color: #ffffff !important; /* white */
}

/* Clean lists */
.markdown-content ul li::marker {
  color: #6b7280 !important; /* gray-500 */
}
.dark .markdown-content ul li::marker {
  color: #ffffff !important; /* white */
}

.markdown-content ol li::marker {
  color: #6b7280 !important; /* gray-500 */
  @apply font-semibold;
}
.dark .markdown-content ol li::marker {
  color: #ffffff !important; /* white */
}

.markdown-content ul,
.markdown-content ol {
  @apply my-4 pl-6;
}

.markdown-content li {
  @apply my-2 text-gray-800 dark:text-white;
}

/* Clean links */
.markdown-content a {
  color: #2563eb !important; /* blue-600 */
  @apply underline;
}
.dark .markdown-content a {
  color: #60a5fa !important; /* blue-400 */
}

.markdown-content a:hover {
  color: #1d4ed8 !important; /* blue-700 */
}
.dark .markdown-content a:hover {
  color: #93c5fd !important; /* blue-300 */
}

/* Clean tables */
.markdown-content table {
  @apply w-full my-6 border-collapse;
}

.markdown-content th,
.markdown-content td {
  @apply border border-gray-300 dark:border-gray-700 p-3 text-left text-gray-800 dark:text-white;
}

.markdown-content th {
  background-color: #f3f4f6 !important; /* gray-100 */
  @apply font-semibold;
}
.dark .markdown-content th {
  background-color: #1f2937 !important; /* gray-800 */
  color: #ffffff !important; /* white */
}

.markdown-content tr:nth-child(even) {
  background-color: #f9fafb !important; /* gray-50 */
}
.dark .markdown-content tr:nth-child(even) {
  background-color: #111827 !important; /* gray-900 */
}

.markdown-content tr:hover {
  background-color: #f3f4f6 !important; /* gray-100 */
}
.dark .markdown-content tr:hover {
  background-color: #374151 !important; /* gray-700 */
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .markdown-content h1 {
    font-size: 1.75rem !important;
    line-height: 2.25rem !important;
    margin-bottom: 1rem !important;
  }
  .markdown-content h2 {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    margin-top: 1.5rem !important;
  }
  .markdown-content h3 {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
  .markdown-content h4 {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }
  .markdown-content pre,
  .markdown-content .highlight {
    padding: 0.75rem !important;
  }
  .markdown-content pre code {
    white-space: pre-wrap;
    word-break: break-word;
  }
  .markdown-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Clean emphasis */
.markdown-content strong {
  @apply font-bold text-gray-900 dark:text-white;
}

.markdown-content em {
  @apply italic text-gray-700 dark:text-white;
}