/* ========================================
   GitHub 风格代码块样式
   ======================================== */

.code-block-wrapper {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(27, 31, 36, 0.04);
  background: #fff;
  margin: var(--spacing-lg) auto;
  overflow: hidden;
  width: 95%;
  max-width: 95%;
}

.code-block-header {
  background: #f6f8fa;
  border-bottom: 1px solid var(--color-border);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-family: var(--font-sans);
}

.code-block-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.code-block-language {
  color: var(--color-text-light);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

.code-block-filename {
  font-weight: 600;
  color: #0969da;
}

.code-block-description {
  color: var(--color-text-light);
  font-size: 13px;
}

.code-block-actions {
  display: flex;
  gap: 8px;
}

.code-download-button,
.code-copy-button {
  background: #f3f4f6;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--color-text);
  transition: all 0.2s;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.code-download-button svg,
.code-copy-button svg {
  display: block;
}

.code-download-button:hover,
.code-copy-button:hover {
  background: #eaeef2;
}

.code-download-button.downloaded,
.code-copy-button.copied {
  background: #ddf4ff;
  border-color: #54aeff;
  color: #0969da;
}

/* Prism.js 代码块样式 */
pre[class*="language-"] {
  margin: 0 !important;
  padding: 16px !important;
  background: #272822 !important;
  border-radius: 0 !important;
  max-height: 500px;
  overflow: auto;
  position: relative; /* 为行号提供定位参照 */
}

pre[class*="language-"].line-numbers {
  padding-left: 3.8em !important;
}

/* 行号样式 - 让行号背景延伸到代码块的顶部和底部 */
.line-numbers .line-numbers-rows {
  border-right: 1px solid #3e3d32 !important;
  background: #1e1e1e !important;
  top: -16px !important;        /* 向上延伸 16px（pre 的 padding-top） */
  height: calc(100% + 32px) !important; /* 高度增加 32px（上下 padding） */
  padding-top: 16px !important; /* 补偿 top 的负值，使行号数字对齐 */
}

.line-numbers-rows > span:before {
  color: #75715e;
}

/* 行高亮样式 */
.line-highlight {
  background: rgba(255, 255, 255, 0.08);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0));
}

.line-highlight:before,
.line-highlight[data-end]:after {
  background-color: #75715e;
  color: #f8f8f2;
}

/* 滚动条美化 */
pre[class*="language-"]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

pre[class*="language-"]::-webkit-scrollbar-track {
  background: #1e1e1e;
}

pre[class*="language-"]::-webkit-scrollbar-thumb {
  background-color: #3e3d32;
  border-radius: 4px;
}

pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
  background-color: #75715e;
}

/* 修复滚动条交叉处的白底 */
pre[class*="language-"]::-webkit-scrollbar-corner {
  background: #272822;
}

/* 工具栏样式覆盖 */
div.code-toolbar {
  position: relative;
  margin: 0;
}

div.code-toolbar > .toolbar {
  display: none; /* 使用自定义的工具栏 */
}

/* Dark mode 适配 */
[data-theme="dark"] .code-block-wrapper {
  background: var(--color-bg);
  border-color: var(--color-border);
}

[data-theme="dark"] .code-block-header {
  background: var(--color-bg-light);
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .code-block-filename {
  color: var(--color-blue-green);
}

[data-theme="dark"] .code-download-button,
[data-theme="dark"] .code-copy-button {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .code-download-button svg,
[data-theme="dark"] .code-copy-button svg {
  color: var(--color-text);
}

[data-theme="dark"] .code-download-button:hover,
[data-theme="dark"] .code-copy-button:hover {
  background: var(--color-bg-light);
}

[data-theme="dark"] .code-download-button.downloaded,
[data-theme="dark"] .code-copy-button.copied {
  background: #0d3a58;
  border-color: var(--color-blue-green);
  color: var(--color-blue-green);
}

[data-theme="dark"] .code-download-button.downloaded svg,
[data-theme="dark"] .code-copy-button.copied svg {
  color: var(--color-blue-green);
}

/* 响应式 */
@media (max-width: 768px) {
  .code-block-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .code-block-actions {
    width: 100%;
    justify-content: flex-end;
  }

  pre[class*="language-"] {
    font-size: 12px;
    padding: 12px !important;
  }
}