/* ============================================================
   妹妹紫（Meimeizi）· 代码块增强
   -----------------------------------------------------------------
   配套资源：assets/libs/prism/（Prism 1.29 全语言版 + 21 套配色主题）
   由 theme.js 的 initCodeBlocks() 在正文代码块上生成如下结构：
     .code-block                            外层容器（圆角 / 描边 / 阴影）
       ├─ .code-head                        标题栏（语言名或自定义标题 + 复制按钮）
       ├─ .code-body                        代码区（折叠时被裁切）
       │    └─ pre.code-pre.line-numbers    代码本体（Prism 上色 + 官方行号）
       └─ .code-toggle                      展开 / 收起按钮（超长时才生成）

   配色策略：UI 一律基于 currentColor 与中性半透明，
   21 套浅色 / 深色代码主题因此都能自动适配，无需逐套定制。
   --code-bg / --code-fg 由 JS 从当前 Prism 主题的 pre 上读取，
   用于让标题栏、折叠遮罩与代码底色保持一致。
   ============================================================ */

/* ---------- 1. 容器 ---------- */
.post-content .code-block {
  position: relative;
  margin: 0 0 1.4em;
  border: 1px solid rgba(128, 128, 128, .22);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  /* 标题栏与折叠遮罩的基准色；JS 会读取当前代码主题的真实底色覆盖它 */
  --code-bg: #282c34;
  --code-fg: currentColor;
  --code-limit: 360px;
  color: var(--code-fg);
}
.post-content .code-block .code-body { position: relative; }

/* ---------- 2. 代码本体 ---------- */
/* 覆盖 style.css 里 .post-content pre 的固定深紫底与内阴影，
   底色交回给 Prism 主题（code.css 在 style.css 之后加载，同特异性取胜） */
.post-content .code-block .code-pre {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* 横向滚动交给内部 code：行号 gutter 挂在 pre 上，横向滚动时才不会被带走 */
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 14px 0 14px 18px;
}
/* 带行号时给 gutter 让出 3.8em（Prism 的行号规格） */
.post-content .code-block .code-pre.line-numbers { padding-left: 3.8em; }

.post-content .code-block .code-pre > code {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 18px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  background: transparent;
}

/* 代码块内的滚动条：细、中性，不抢主色视觉 */
.post-content .code-block .code-pre { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, .45) transparent; }
.post-content .code-block .code-pre::-webkit-scrollbar { width: 8px; height: 8px; }
.post-content .code-block .code-pre::-webkit-scrollbar-track { background: transparent; }
.post-content .code-block .code-pre::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, .45);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}
.post-content .code-block .code-pre::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, .75); background-clip: content-box; }

/* ---------- 3. 行号（自绘 gutter，见 theme.js 的 addGutter） ---------- */
.post-content .code-block .code-pre { position: relative; }
.post-content .code-block .code-pre.has-gutter { padding-left: 3.8em; }

.post-content .code-block .code-gutter {
  position: absolute;
  top: 14px;                    /* 与 .code-pre 的 padding-top 对齐 */
  bottom: 14px;
  left: 0;
  width: 3.8em;
  padding-right: 1.1em;
  box-sizing: border-box;
  text-align: right;
  color: inherit;               /* 跟随代码主题的文字色，明暗自动适配 */
  white-space: pre;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
}
.post-content .code-block .code-gutter > span { display: block; opacity: .36; }
/* 行号区与代码之间的极淡竖线 */
.post-content .code-block .code-gutter::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: currentColor;
  opacity: .12;
}

/* ---------- 4. 标题栏 ---------- */
.post-content .code-block .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 10px 0 14px;
  background: var(--code-bg);
  /* 在代码底色上叠一层极淡的 currentColor：浅色主题变浅灰、深色主题变亮灰 */
  background: color-mix(in srgb, var(--code-bg) 92%, currentColor 8%);
  color: var(--code-fg);
  font-size: 12.5px;
  line-height: 1.4;
}
.post-content .code-block.has-divider .code-head { border-bottom: 1px solid rgba(128, 128, 128, .28); }
.post-content .code-block .code-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: .2px;
  opacity: .8;
}

/* 复制按钮 */
.post-content .code-block .code-copy {
  flex: none;
  margin-left: auto;            /* 未开启标题时，复制按钮仍靠右 */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(128, 128, 128, .16);
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
  transition: opacity .16s, background-color .16s, color .16s;
}
.post-content .code-block .code-copy:hover { opacity: 1; background: rgba(128, 128, 128, .3); }
.post-content .code-block .code-copy svg { width: 13px; height: 13px; }
.post-content .code-block .code-copy.is-done { color: #4caf50; opacity: 1; }

/* ---------- 5. 高度限制（超长代码块内部纵向滚动） ---------- */
.post-content .code-block.has-limit .code-pre {
  max-height: var(--code-limit);
  overflow-y: auto;
}

/* ---------- 6. 折叠 ---------- */
.post-content .code-block.has-collapse.is-collapsed .code-body {
  max-height: var(--code-limit);
  overflow: hidden;
}
.post-content .code-block.has-collapse.is-collapsed .code-pre { overflow-y: hidden; }
/* 底部渐隐，暗示下方还有内容 */
.post-content .code-block.has-collapse.is-collapsed .code-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--code-bg));
  pointer-events: none;
}

.post-content .code-block .code-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 34px;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(128, 128, 128, .22);
  background: var(--code-bg);
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  opacity: .75;
  transition: opacity .16s;
}
.post-content .code-block .code-toggle:hover { opacity: 1; }
.post-content .code-block .code-toggle svg { width: 14px; height: 14px; transition: transform .22s; }
.post-content .code-block:not(.is-collapsed) .code-toggle svg { transform: rotate(180deg); }

/* ---------- 7. 打印 ---------- */
@media print {
  .post-content .code-block .code-head,
  .post-content .code-block .code-toggle { display: none; }
  .post-content .code-block.has-collapse.is-collapsed .code-body { max-height: none; }
  .post-content .code-block.has-collapse.is-collapsed .code-body::after { display: none; }
}