@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 2s ease infinite;
}

/* 自定义Markdown预览样式 */

/* 基础样式 */
.markdown-body {
  box-sizing: border-box;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  @apply bg-white dark:bg-zinc-950 text-foreground mb-2;
}

/* 暗黑模式样式 */
.markdown-dark {
  @apply bg-secondary text-foreground;
}

.markdown-dark pre {
  @apply bg-secondary text-foreground;
}

.markdown-dark code {
  @apply bg-secondary text-foreground overflow-x-auto;
}

.markdown-dark a {
  color: #58a6ff;
}

.markdown-dark h1,
.markdown-dark h2,
.markdown-dark h3,
.markdown-dark h4,
.markdown-dark h5,
.markdown-dark h6 {
  color: #e6edf3;
  border-bottom-color: #21262d;
}

.markdown-dark hr {
  background-color: #30363d;
}

.markdown-dark blockquote {
  border-left-color: #30363d;
  color: #8b949e;
}

.markdown-dark table tr {
  background-color: #0d1117;
  border-color: #30363d;
}

.markdown-dark table tr:nth-child(2n) {
  background-color: #161b22;
}

.markdown-dark table th,
.markdown-dark table td {
  border-color: #30363d;
}

/* 代码高亮容器 */
pre.hljs {
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
  max-width: 100%;
  @apply overflow-x-auto;
}

/* 亮色模式下的代码高亮 */
.hljs-light {
  background: #f6f8fa;
  color: #24292e;
}

/* 暗色模式下的代码高亮 */
.hljs-dark {
  background: #0d1117 !important;
  color: #c9d1d9 !important;
}

/* 针对暗色模式下的代码高亮覆盖样式 */
.hljs-dark .hljs-comment,
.hljs-dark .hljs-punctuation {
  color: #8b949e !important;
}

.hljs-dark .hljs-attr,
.hljs-dark .hljs-attribute,
.hljs-dark .hljs-meta,
.hljs-dark .hljs-selector-attr,
.hljs-dark .hljs-selector-class,
.hljs-dark .hljs-selector-id {
  color: #79c0ff !important;
}

.hljs-dark .hljs-variable,
.hljs-dark .hljs-literal,
.hljs-dark .hljs-number,
.hljs-dark .hljs-doctag {
  color: #ff7b72 !important;
}

.hljs-dark .hljs-string,
.hljs-dark .hljs-regexp {
  color: #a5d6ff !important;
}

.hljs-dark .hljs-built_in,
.hljs-dark .hljs-keyword,
.hljs-dark .hljs-name,
.hljs-dark .hljs-selector-tag,
.hljs-dark .hljs-tag {
  color: #7ee787 !important;
}

/* 确保图片不会超过容器宽度 */
.markdown-body img {
  max-width: 100%;
}