/* 
code-custom.css：负责

复制按钮功能及样式
颜色主题覆盖
特定字体覆盖
 */

/* 代码块容器基本样式 */
.code-block-container {
  margin-top: 5px;
  margin-bottom: 2em;
  width: 100%;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border-radius: 6px;
  overflow: hidden;
  height: auto !important;
}


/* 代码块复制按钮样式优化 */
/* 隐藏复制按钮文本，只显示图标 */
.copy-btn::before, 
.copy-button::before {
  content: "";
  display: none !important;
}

/* 复制按钮统一样式 */
.copy-btn, 
.copy-button {
  width:  26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  color: #9d9d9d;
  cursor: pointer;
  transition: all 0.2s ease;
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 代码块容器悬停时显示复制按钮 */
pre:hover .copy-button,
.code-block-container:hover .copy-btn {
  opacity: 1;
}

/* 复制按钮悬停和激活状态 */
.copy-btn:hover,
.copy-button:hover {
  background: #3c3c3c;
  color: #d4d4d4;
}

.copy-btn.copied,
.copy-button.copied {
  background: #0078d4;
  color: #ffffff;
  border-color: #0078d4;
}

/* 代码区域颜色覆盖 - 仅保留颜色相关覆盖，布局由 code.css 负责 */
.highlight {
  background: #1e1e1e;
  color: #d4d4d4;
}

.highlight pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 16px; /* 从 1rem 改为 16px，保持一致 */
  overflow-x: auto;
  border-radius: 6px;
}

/* 特殊字体覆盖 */
.code-language {
  font-family: 'JetBrains Mono', monospace, 'Segoe UI', sans-serif;
  font-size: 12px;
}

/* 美化普通代码块 */
pre:not(.line-numbers-pre):not(.code-content) {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 16px;
  margin: 2em 0;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* 统一行号和代码颜色 */
.hljs {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
}

/* 添加代码类型标记到普通代码块 */
pre:not(.line-numbers-pre):not(.code-content):not(.mermaid.enhanced)::before {
  content: "code";
  position: absolute;
  top: 0;
  right: 0;
  background: #252526;
  color: #9d9d9d;
  padding: 2px 8px;
  font-size: 12px;
  border-bottom-left-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

/* Enhanced Mermaid block label */
pre.mermaid.enhanced::before {
  content: "mermaid";
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #2c2c2c, #3a3a3a);
  color: #a0a0a0;
  padding: 4px 10px;
  font-size: 12px;
  font-family: 'JetBrains Mono', 'Segoe UI', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom-left-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

pre.mermaid.enhanced:hover::before {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  background: linear-gradient(135deg, #3a3a3a, #2c2c2c);
  color: #b8b8b8;
}

/* 滚动指示效果 */
.scrollable::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 16px;
  background: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(30,30,30,1) 100%);
  pointer-events: none;
  opacity: 0.8;
}

/* 滚动时的指示效果 */
.scrolled::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 16px;
  background: linear-gradient(270deg, rgba(30,30,30,0) 0%, rgba(30,30,30,1) 100%);
  pointer-events: none;
  opacity: 0.8;
}

/* 确保代码块中的内容正确显示 */
.code-pre-wrapper {
  display: flex;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  align-items: flex-start; /* 确保不拉伸内部元素 */
  min-height: 0; /* 确保能够正确计算高度 */
  box-sizing: border-box;
  background: #2b2b2b;
  padding: 0; /* 确保没有默认内边距 */
  margin: 0; /* 确保没有默认外边距 */
}

/* 行号区域宽度自适应 */
.line-numbers-pre {
  width: auto;
  flex: 0 0 auto;
  padding: 4px 6px; /* 减小垂直内边距与code.css保持一致 */
  margin: 0;
  box-sizing: border-box; /* 确保边框盒模型一致 */
}

/* 代码内容区域自适应 */
.code-content {
  flex: 1;
  width: 0; /* 初始宽度为0，通过flex-grow伸展 */
  min-width: 0; /* 允许内容区域收缩 */
  overflow-x: auto;
  padding: 4px 8px !important; /* 减小垂直内边距与code.css保持一致 */
  margin: 0;
  box-sizing: border-box; /* 确保边框盒模型一致 */
}

/* 提高代码可读性 */
.hljs {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  max-width: 100%; /* 确保不会超出父容器 */
  box-sizing: border-box; /* 确保padding不会导致宽度计算问题 */
  padding: 0; /* 移除内边距 */
  margin: 0; /* 移除外边距 */
}

/* 超长代码换行控制 */
.code-content code {
  white-space: pre;
  word-wrap: normal;
  tab-size: 4;
  line-height: 1.5;
}

/* 处理特殊高度的代码行 */
.code-content .line img,
.code-content .line svg,
.code-content .line pre,
.code-content .line div {
  max-height: none; /* 确保内联元素不会导致行高异常 */
  vertical-align: middle; /* 确保垂直对齐一致 */
}

/* 在小屏幕上优化显示 */
@media (max-width: 768px) {
  .line-numbers-pre {
    padding: 4px 6px; /* 与非移动版保持一致 */
  }
  
  .code-content {
    padding: 4px 8px !important; /* 与非移动版保持一致 */
  }
}

/* 折叠状态的代码块 */
.code-pre-wrapper.collapsed {
  height: 0 !important;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
}

/* 确保按钮在折叠和展开状态下都有正确的视觉效果 */
.toggle-btn .fa-chevron-down {
  transition: transform 0.3s ease;
}

.toggle-btn .fa-chevron-right {
  transition: transform 0.3s ease;
}

/* 调整普通代码块复制按钮位置，避免与code标签重叠 */
pre:not(.line-numbers-pre):not(.code-content) .copy-button {
  right: 45px; /* 向左移动，给"code"标签留出空间 */
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.2s ease; /* 平滑显示/隐藏过渡 */
}

/* 仅在鼠标悬停时显示普通代码块的复制按钮 */
pre:not(.line-numbers-pre):not(.code-content):hover .copy-button {
  opacity: 1;
}