/* 代码高亮样式 - 适配 ForestWhisper 主题 */

/* 引入 PaperMono 字体 */
@font-face {
  font-family: 'PaperMono';
  src: url('../fonts/PaperMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 代码块容器样式 - VS Code 深色模式 */
.post-body pre[class*="language-"],
.post-content pre[class*="language-"],
.single-content pre[class*="language-"],
.page-content pre[class*="language-"],
.entry-content pre[class*="language-"] {
  background: #1e1e1e !important; /* VS Code 深色模式背景色 */
  color: #d4d4d4 !important; /* VS Code 默认文本色 */
  padding: 20px 24px !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin: 1.5em 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative !important;
  font-family: 'PaperMono', 'Consolas', 'Monaco', 'Courier New', monospace !important;
}

[data-theme="dark"] .post-body pre[class*="language-"],
[data-theme="dark"] .post-content pre[class*="language-"],
[data-theme="dark"] .single-content pre[class*="language-"],
[data-theme="dark"] .page-content pre[class*="language-"],
[data-theme="dark"] .entry-content pre[class*="language-"] {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 代码块内代码样式 */
.post-body pre[class*="language-"] code,
.post-content pre[class*="language-"] code,
.single-content pre[class*="language-"] code,
.page-content pre[class*="language-"] code,
.entry-content pre[class*="language-"] code {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
  font-family: 'PaperMono', 'Consolas', 'Monaco', 'Courier New', monospace !important;
}

/* 行内代码样式 */
.post-body code:not([class*="language-"]),
.post-content code:not([class*="language-"]),
.single-content code:not([class*="language-"]),
.page-content code:not([class*="language-"]),
.entry-content code:not([class*="language-"]) {
  background: rgba(121, 174, 156, 0.12) !important;
  color: var(--main-color) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-size: 0.85em !important;
  font-family: 'PaperMono', 'Consolas', 'Monaco', 'Courier New', monospace !important;
  font-weight: 500 !important;
}

[data-theme="dark"] .post-body code:not([class*="language-"]),
[data-theme="dark"] .post-content code:not([class*="language-"]),
[data-theme="dark"] .single-content code:not([class*="language-"]),
[data-theme="dark"] .page-content code:not([class*="language-"]),
[data-theme="dark"] .entry-content code:not([class*="language-"]) {
  background: rgba(121, 174, 156, 0.2) !important;
  color: #8dd592 !important;
}

/* 代码块中的行内代码（避免双重样式） */
.post-body pre code,
.post-content pre code,
.single-content pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

/* Prism.js 语法高亮颜色调整 */
.post-body .token.comment,
.post-content .token.comment,
.single-content .token.comment {
  color: #6a737d !important;
  font-style: italic !important;
}

.post-body .token.string,
.post-content .token.string,
.single-content .token.string {
  color: #9ecb87 !important;
}

.post-body .token.keyword,
.post-content .token.keyword,
.single-content .token.keyword {
  color: #c792ea !important;
}

.post-body .token.function,
.post-content .token.function,
.single-content .token.function {
  color: #82aaff !important;
}

.post-body .token.number,
.post-content .token.number,
.single-content .token.number {
  color: #f78c6c !important;
}

.post-body .token.operator,
.post-content .token.operator,
.single-content .token.operator {
  color: #89ddff !important;
}

.post-body .token.punctuation,
.post-content .token.punctuation,
.single-content .token.punctuation {
  color: #c792ea !important;
}

.post-body .token.property,
.post-content .token.property,
.single-content .token.property {
  color: #ffcb6b !important;
}

.post-body .token.tag,
.post-content .token.tag,
.single-content .token.tag {
  color: #f07178 !important;
}

.post-body .token.attr-name,
.post-content .token.attr-name,
.single-content .token.attr-name {
  color: #c792ea !important;
}

.post-body .token.attr-value,
.post-content .token.attr-value,
.single-content .token.attr-value {
  color: #9ecb87 !important;
}

.post-body .token.selector,
.post-content .token.selector,
.single-content .token.selector {
  color: #c792ea !important;
}

.post-body .token.class-name,
.post-content .token.class-name,
.single-content .token.class-name {
  color: #ffcb6b !important;
}

.post-body .token.variable,
.post-content .token.variable,
.single-content .token.variable {
  color: #f07178 !important;
}

.post-body .token.boolean,
.post-content .token.boolean,
.single-content .token.boolean {
  color: #c792ea !important;
}

.post-body .token.constant,
.post-content .token.constant,
.single-content .token.constant {
  color: #f78c6c !important;
}

/* 代码块滚动条 - 使用浏览器默认滚动条 */

/* 代码块语言标签已移至工具栏中间，移除 ::before 样式 */

/* 响应式调整 */
@media (max-width: 768px) {
  .post-body pre[class*="language-"],
  .post-content pre[class*="language-"],
  .single-content pre[class*="language-"],
  .page-content pre[class*="language-"],
  .entry-content pre[class*="language-"] {
    padding: 16px 18px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
  }
  
  
  .code-toolbar {
    left: 6px;
    right: 6px;
    top: 6px;
  }
  
  .code-copy-btn .copy-text {
    display: none;
  }
  
  .code-copy-btn {
    padding: 6px;
    min-width: 32px;
  }
  
  .code-language-label {
    font-size: 0.65rem;
    padding: 3px 6px;
  }
  
  .code-expand-btn span {
    font-size: 0.7rem;
  }
  
  .code-expand-btn {
    padding: 6px 10px;
    bottom: 6px;
    right: 6px;
  }
}

/* 确保代码块在文章内容中正确显示 */
.post-body pre,
.post-content pre,
.single-content pre {
  max-width: 100%;
  overflow-x: auto;
  word-wrap: normal;
  white-space: pre;
}

/* 代码块样式 - 无行号 */

/* 代码工具栏样式 */
.code-toolbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.code-toolbar > * {
  pointer-events: auto;
}

.post-body pre[class*="language-"]:hover .code-toolbar,
.post-content pre[class*="language-"]:hover .code-toolbar,
.single-content pre[class*="language-"]:hover .code-toolbar,
.page-content pre[class*="language-"]:hover .code-toolbar,
.entry-content pre[class*="language-"]:hover .code-toolbar {
  opacity: 1;
}

/* 工具栏左侧（预留，可用于其他功能） */
.code-toolbar-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 工具栏中间（语言标签） */
.code-toolbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.code-language-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  white-space: nowrap;
}

/* 工具栏右侧（复制按钮和折叠按钮等） */
.code-toolbar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

/* 复制按钮样式 */
.code-copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #e4e4e7;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.code-copy-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.code-copy-btn:active {
  transform: translateY(0);
}

.code-copy-btn.copied {
  background: rgba(121, 174, 156, 0.3);
  border-color: rgba(121, 174, 156, 0.5);
  color: #8dd592;
}

.code-copy-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.code-copy-btn .copy-text {
  font-size: 0.75rem;
  white-space: nowrap;
}

/* 展开按钮样式（右下角） */
.code-expand-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(121, 174, 156, 0.2);
  border: 1px solid rgba(121, 174, 156, 0.3);
  border-radius: 6px;
  color: #8dd592;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  z-index: 11; /* 确保在渐变遮罩之上 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 1; /* 始终可见 */
}

/* 展开按钮在工具栏中时（展开状态） */
.code-toolbar .code-expand-btn,
.code-toolbar-right .code-expand-btn {
  position: static;
  bottom: auto;
  right: auto;
  opacity: 1;
}

.code-expand-btn:hover {
  background: rgba(121, 174, 156, 0.3);
  border-color: rgba(121, 174, 156, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.code-expand-btn:active {
  transform: translateY(0);
}

.code-expand-btn.expanded svg {
  transform: rotate(180deg);
}

.code-expand-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.code-expand-btn span {
  font-size: 0.75rem;
  white-space: nowrap;
}

/* 代码折叠样式 */
.post-body pre.code-collapsible,
.post-content pre.code-collapsible,
.single-content pre.code-collapsible,
.page-content pre.code-collapsible,
.entry-content pre.code-collapsible {
  max-height: none;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.post-body pre.code-collapsible.code-collapsed,
.post-content pre.code-collapsible.code-collapsed,
.single-content pre.code-collapsible.code-collapsed,
.page-content pre.code-collapsible.code-collapsed,
.entry-content pre.code-collapsible.code-collapsed {
  max-height: 32em; /* 约20行的高度 (1.6em * 20) */
  overflow: hidden;
  position: relative;
}

.post-body pre.code-collapsible.code-collapsed::after,
.post-content pre.code-collapsible.code-collapsed::after,
.single-content pre.code-collapsible.code-collapsed::after,
.page-content pre.code-collapsible.code-collapsed::after,
.entry-content pre.code-collapsible.code-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(30, 31, 34, 0.95));
  pointer-events: none;
  border-radius: 0 0 12px 12px;
  z-index: 1; /* 在按钮下方 */
}

[data-theme="dark"] .post-body pre.code-collapsible.code-collapsed::after,
[data-theme="dark"] .post-content pre.code-collapsible.code-collapsed::after,
[data-theme="dark"] .single-content pre.code-collapsible.code-collapsed::after,
[data-theme="dark"] .page-content pre.code-collapsible.code-collapsed::after,
[data-theme="dark"] .entry-content pre.code-collapsible.code-collapsed::after {
  background: linear-gradient(to bottom, transparent, rgba(13, 17, 23, 0.95));
}