// ============================================================================
// Markdown 公共样式
// 用于统一 AI 助理、智能跟单等场景的 Markdown 渲染样式
// ============================================================================

// Markdown 内容容器 Mixin
// 使用方式：在需要渲染 Markdown 的容器上 @include markdown-content-styles;
@mixin markdown-content-styles-agent {
  font-size: 14px;
  line-height: 1.75;
  color: #374151;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;

  // 段落样式
  p {
    margin: 0 0 16px 0;
    line-height: 1.75;
    font-size: 14px; // 统一字体大小

    &:last-child {
      margin-bottom: 0;
    }
  }

  // 标题样式
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 20px 0 12px 0;
    font-weight: 700;
    line-height: 1.4;

    &:first-child {
      margin-top: 0;
    }
  }

  h1 {
    font-size: 20px; // 统一为 20px
  }

  h2 {
    font-size: 18px; // 保持 18px
  }

  h3 {
    font-size: 16px; // 保持 16px
  }

  h4 {
    font-size: 15px; // 保持 15px
  }

  h5,
  h6 {
    font-size: 14px; // 统一为 14px
  }

  // 粗体
  strong {
    font-weight: 600;
    color: #1f2937;
  }

  // 斜体
  em {
    font-style: italic;
    color: #6b7280;
  }

  // 无序列表
  ul {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;

    li {
      position: relative;
      margin: 10px 0;
      padding-left: 24px;
      line-height: 1.7;
      font-size: 14px; // 统一字体大小

      &::before {
        content: '';
        position: absolute;
        left: 8px;
        top: 10px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.6;
      }
    }

    // 嵌套列表
    ul {
      margin: 6px 0;

      li::before {
        width: 5px;
        height: 5px;
        background: transparent;
        border: 1.5px solid currentColor;
      }
    }
  }

  // 有序列表
  ol {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
    counter-reset: item;

    li {
      position: relative;
      margin: 10px 0;
      padding-left: 32px;
      line-height: 1.7;
      font-size: 14px; // 统一字体大小
      counter-increment: item;

      &::before {
        content: counter(item) '.';
        position: absolute;
        left: 0;
        top: 0;
        font-size: 12px; // 统一标记字体大小
        font-weight: 600;
        color: currentColor;
        opacity: 0.7;
      }
    }

    // 嵌套列表
    ol {
      margin: 6px 0;
      counter-reset: item; // 嵌套列表重置计数器

      li {
        counter-increment: item;

        &::before {
          font-size: 12px;
        }
      }
    }
  }

  // 行内代码（GitHub GFM 规范：浅灰背景、与正文同色、等宽字）
  code:not([class*='language-']) {
    background: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 6px;
    font-family:
      ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 85%;
    color: inherit;
  }

  // 代码块
  pre {
    margin: 12px 0;
    padding: 12px 16px;
    background: #1e1e1e;
    border-radius: 8px;
    overflow-x: auto;

    code {
      background: transparent;
      padding: 0;
      color: #d4d4d4;
      font-size: 13px;
    }
  }

  // 引用块
  blockquote {
    margin: 16px 0;
    padding: 16px 20px;
    border-left: 4px solid currentColor;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0 8px 8px 0;
    color: #4b5563;
    font-style: italic;
    font-size: 14px; // 统一字体大小

    p {
      margin: 0;
      font-size: 14px; // 统一段落字体大小
    }
  }

  // 分割线
  hr {
    border: none;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 24px 0;
  }

  // 链接
  a {
    color: #3b82f6;
    text-decoration: none;
    border-bottom: 1px dashed rgba(59, 130, 246, 0.4);
    transition: all 0.2s ease;

    &:hover {
      color: #2563eb;
      border-bottom-style: solid;
    }
  }

  // 表格
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
    border-radius: 8px;
    overflow: hidden;

    thead {
      background: rgba(0, 0, 0, 0.05);

      th {
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        color: #1f2937;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
      }
    }

    tbody {
      tr {
        &:hover {
          background: rgba(0, 0, 0, 0.02);
        }

        &:not(:last-child) td {
          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }
      }

      td {
        padding: 10px 12px;
        color: #4b5563;
      }
    }
  }
}

@mixin markdown-content-styles-content {
  .markdown-body {
    line-height: 1.6;
    color: #333;

    :first-child {
      margin-top: 0;
    }
    :last-child {
      margin-bottom: 0;
    }

    &__h1,
    &__h2,
    &__h3,
    &__h4,
    &__h5,
    &__h6 {
      margin-top: 24px;
      margin-bottom: 16px;
      font-weight: 600;
      line-height: 1.25;
    }

    &__h1 {
      font-size: 32px;
      border-bottom: 1px solid #eaecef;
      padding-bottom: 8px;
    }

    &__h2 {
      font-size: 24px;
      border-bottom: 1px solid #eaecef;
      padding-bottom: 8px;
    }

    &__h3 {
      font-size: 20px;
    }

    &__h4 {
      font-size: 18px;
    }

    &__h5 {
      font-size: 16px;
    }

    &__h6 {
      font-size: 14px;
      color: #666;
    }

    &__p {
      margin-bottom: 16px;
    }

    &__ul {
      margin-bottom: 16px;
      padding-left: 30px;
      list-style-type: disc !important;

      ul {
        list-style-type: circle !important;

        ul {
          list-style-type: square !important;
        }
      }
    }

    &__ol {
      margin-bottom: 16px;
      padding-left: 30px;
      list-style-type: decimal !important;

      ol {
        list-style-type: lower-roman !important;

        ol {
          list-style-type: lower-alpha !important;
        }
      }
    }

    &__li {
      margin-bottom: 8px;
      display: list-item !important;
    }

    &__blockquote {
      margin: 16px 0;
      padding: 0 16px;
      color: #666;
      border-left: 4px solid #dfe2e5;
    }

    &__code-inline {
      padding: 2px 6px;
      background-color: #f6f8fa;
      border-radius: 3px;
      font-size: 85%;
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    }

    &__code-block {
      display: block;
      padding: 16px;
      margin: 16px 0;
      background-color: #f6f8fa;
      border-radius: 6px;
      overflow-x: auto;
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
      font-size: 85%;
      line-height: 1.45;
    }

    &__pre {
      margin: 16px 0;
      background-color: #f6f8fa;
      border-radius: 6px;
      padding: 16px;
      overflow-x: auto;

      code {
        background-color: transparent;
        padding: 0;
      }
    }

    &__a {
      color: #0366d6;
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    &__img {
      max-width: 100%;
      height: auto;
      margin: 16px 0;
      border-radius: 4px;
    }

    &__table {
      width: 100%;
      border-collapse: collapse;
      margin: 16px 0;
      display: block;
      overflow-x: auto;
    }

    &__thead {
      background-color: #f6f8fa;
    }

    &__th,
    &__td {
      padding: 8px 16px;
      border: 1px solid #dfe2e5;
      text-align: left;
    }

    &__th {
      font-weight: 600;
    }

    &__hr {
      margin: 24px 0;
      border: none;
      border-top: 1px solid #eaecef;
    }
  }
}
