/*
 * SPDX-FileCopyrightText: 2025 Weibo, Inc.
 *
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * Unified Markdown Styles
 *
 * This file contains all markdown-related styles used across the application.
 * It supports multiple markdown containers:
 * - .wmde-markdown: Legacy @uiw/react-markdown-editor styles
 * - .markdown-content: New EnhancedMarkdown component styles
 * - .enhanced-markdown: Enhanced markdown with mermaid/latex support
 * - .markdown-body: Generic markdown body styles
 *
 * Import this file globally in layout.tsx to ensure consistent markdown rendering.
 */

/* ==========================================================================
   Base Markdown Styles
   ========================================================================== */

.wmde-markdown,
.markdown-content,
.enhanced-markdown {
  font-size: 0.875rem; /* text-sm = 14px */
  line-height: 1.5;
  /* Reset background to transparent since wmde-markdown sets a background */
  background-color: transparent;
}

/* ==========================================================================
   Headings
   ========================================================================== */

.wmde-markdown h1,
.wmde-markdown h2,
.wmde-markdown h3,
.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6,
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.wmde-markdown h1,
.markdown-content h1 {
  font-size: 1.25rem; /* 20px */
  border-bottom: none;
  padding-bottom: 0;
}

.wmde-markdown h2,
.markdown-content h2 {
  font-size: 1.125rem; /* 18px */
  border-bottom: none;
  padding-bottom: 0;
}

.wmde-markdown h3,
.markdown-content h3 {
  font-size: 1rem; /* 16px */
}

.wmde-markdown h4,
.wmde-markdown h5,
.wmde-markdown h6,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  font-size: 0.875rem; /* 14px */
}

/* ==========================================================================
   Paragraphs
   ========================================================================== */

.wmde-markdown p,
.markdown-content p,
.wmde-markdown-p {
  margin-bottom: 0.75em;
  display: block;
}

/* ==========================================================================
   Lists
   ========================================================================== */

.wmde-markdown ul,
.wmde-markdown ol,
.markdown-content ul,
.markdown-content ol {
  margin-bottom: 0.75em;
  padding-left: 1.5em;
}

/* Restore list styles that Tailwind preflight resets */
.wmde-markdown ul,
.markdown-content ul {
  list-style-type: disc;
}

.wmde-markdown ol,
.markdown-content ol {
  list-style-type: decimal;
}

.wmde-markdown ul ul,
.wmde-markdown ol ul,
.markdown-content ul ul,
.markdown-content ol ul {
  list-style-type: circle;
}

.wmde-markdown ul ul ul,
.wmde-markdown ol ul ul,
.wmde-markdown ol ol ul,
.wmde-markdown ul ol ul,
.markdown-content ul ul ul,
.markdown-content ol ul ul,
.markdown-content ol ol ul,
.markdown-content ul ol ul {
  list-style-type: square;
}

.wmde-markdown li,
.markdown-content li {
  margin-bottom: 0.25em;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.wmde-markdown table,
.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
  display: table; /* Keep native table layout */
}

.wmde-markdown table th,
.wmde-markdown table td,
.markdown-content table th,
.markdown-content table td {
  padding: 0.5rem;
  border: 1px solid rgb(var(--color-border));
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal; /* Allow text wrapping in cells */
}

.wmde-markdown table th,
.markdown-content table th {
  background-color: rgb(var(--color-bg-surface));
  font-weight: 600;
  text-align: left;
}

/* Responsive table wrapper for mobile - create scrollable container for each table */
@media (max-width: 767px) {
  /* Wrap each table in a scrollable container */
  .wmde-markdown table,
  .markdown-content table {
    font-size: 0.75rem; /* Smaller text on mobile */
    width: max-content; /* Allow table to expand based on content */
    display: block; /* Allow overflow */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Restore table layout for internal elements */
  .wmde-markdown table thead,
  .wmde-markdown table tbody,
  .markdown-content table thead,
  .markdown-content table tbody {
    display: table-header-group;
  }

  .wmde-markdown table tbody,
  .markdown-content table tbody {
    display: table-row-group;
  }

  .wmde-markdown table tr,
  .markdown-content table tr {
    display: table-row;
  }

  .wmde-markdown table th,
  .wmde-markdown table td,
  .markdown-content table th,
  .markdown-content table td {
    display: table-cell;
    padding: 0.375rem 0.5rem;
    white-space: nowrap; /* Prevent text wrapping on mobile for better readability */
  }
}

/* ==========================================================================
   Code Blocks
   ========================================================================== */

/* Fix markdown code/pre overflow issue */
.markdown-body pre,
.markdown-body code {
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

/* Override code block styles to use our design system colors */
.wmde-markdown code,
.wmde-markdown tt,
.markdown-content code,
.markdown-content tt {
  font-size: 0.875em;
  background-color: rgb(var(--color-code-bg));
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
}

.wmde-markdown pre,
.markdown-content pre {
  background-color: rgb(var(--color-code-bg));
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.75em 0;
}

.wmde-markdown pre code,
.wmde-markdown pre tt,
.markdown-content pre code,
.markdown-content pre tt {
  font-size: 0.8125rem; /* 13px */
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* ==========================================================================
   Blockquotes
   ========================================================================== */

.wmde-markdown blockquote,
.markdown-content blockquote {
  border-left-color: rgb(var(--color-border));
  color: rgb(var(--color-text-secondary));
}

/* ==========================================================================
   Links
   ========================================================================== */

.wmde-markdown a,
.markdown-content a {
  color: rgb(var(--color-link));
}

/* ==========================================================================
   Horizontal Rules
   ========================================================================== */

.wmde-markdown hr,
.markdown-content hr {
  background-color: rgb(var(--color-border));
  border-bottom-color: rgb(var(--color-border));
}

/* ==========================================================================
   KaTeX Math Formula Styles
   ========================================================================== */

.katex-display {
  margin: 1em 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}

.katex {
  font-size: 1.1em;
}

/* Ensure math formulas wrap properly on mobile */
@media (max-width: 768px) {
  .katex-display {
    font-size: 0.9em;
  }

  .katex-display > .katex {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Dark mode adjustments for math formulas */
[data-theme='dark'] .katex {
  color: rgb(var(--color-text-primary));
}

[data-theme='dark'] .katex-display {
  background-color: transparent;
}

/* Inline math styling */
.markdown-content .katex {
  padding: 0 0.1em;
}

/* Block math styling */
.markdown-content .katex-display {
  padding: 0.5em 1em;
  border-radius: var(--radius);
  background-color: rgba(var(--color-bg-muted), 0.3);
}
