/*
  Code-block tweaks on top of perplex defaults.

  - 容器 .highlight 的 padding：perplex 默认 2rem 2rem 1.5rem 太大，
    短代码块周围一圈空白看起来空旷；之前压到 0.5rem 又太紧，code
    上下没有呼吸感。折中到 0.6rem。
  - 内层 <pre> 自己 1rem 上下 padding 给代码留出明显呼吸 + 4.5rem
    右边给永远显示的复制按钮预留位置（避免长代码跟按钮重叠）。
  - 复制按钮：默认始终显示（perplex 上游 hover 才显示，触屏 +
    键盘用户根本看不见）。背景用半透明白色，在深色 monokai 代码上
    清晰可见。
*/

.md .highlight {
  /* 跟段落上下的间距 */
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  /* perplex 默认 2rem 2rem 1.5rem 改成更紧但留呼吸 */
  padding: 0.6rem;
}

/* 内层 <pre> 给代码上下 1rem + 左 1.25rem。
   注意 padding-right 不放这里——webkit/blink 的水平滚动容器 padding-right
   不被滚动末端尊重，文字会越过 padding 到 pre 边缘跟复制按钮叠在一起。 */
.md .highlight > pre {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.25rem;
  padding-right: 0;
}

/* 把右侧预留空间给 <code>，child element 的 padding 总是会算进可滚动
   内容宽度，绕过 pre padding-right 的浏览器 bug。 */
.md .highlight > pre > code {
  padding-left: 0;
  padding-right: 5rem;
}

/* 复制按钮始终显示（覆盖 perplex 的 opacity:0 / hover 才显示 + top:2rem
   right:2rem 默认位置——那个位置在单行代码下会偏低）。
   半透明白色背景在深色代码上清晰可见，hover 时变实色。 */
.md .highlight .copy-code,
.md .highlight:hover .copy-code {
  opacity: 1 !important;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0.4rem;
  /* 实色深背景：长代码横向滚动末尾时即使有视觉重叠也不显示叠影 */
  background: rgba(20, 20, 24, 0.92);
  border-radius: 0.4rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.md .highlight .copy-code:hover,
.md .highlight .copy-code:focus {
  background: rgba(40, 40, 48, 0.98);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* 复制按钮 SVG 图标确保可见 */
.md .highlight .copy-code svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* 复制成功的 1 秒内（perplex JS 给 code 加 .selection 类）按钮变绿，
   提供"✓ 已复制"的明确反馈而不是仍然半透明白色看起来像没反应。 */
.md .highlight:has(code.selection) .copy-code {
  background: rgba(56, 161, 105, 0.85);
  box-shadow: 0 0 0 1px rgba(56, 161, 105, 1);
  color: #fff;
}

/* 复制成功反馈：高亮文字本身（按行匹配文字实际宽度），不延伸到 code-block
   末端的空白。
   做法：把 <code> 从 perplex 默认的 display:block 临时切到 display:inline。
   block 模式下 bg 会铺满 pre 的可用宽度（横跨整条 code-block）；inline
   模式下 bg 自然按行断开、每一行 bg 宽度 = 该行文字宽度。
   只在 .selection 期间（JS 给 1 秒）生效，结束后回到 block，不影响平时布局。
   说明：本站绝大多数 fence 不带语言标识，render hook 直接吐出 <code>纯文本
   </code>，<code> 内部没有 span 可挂高亮；这里在 <code> 自身做的方案对
   "纯文本 fence"、"带语法高亮的 fence" 表现一致。
   附带的小瑕疵：最后一行末尾会带 padding-right(5rem) 的 bg 尾巴——那 5rem
   是给复制按钮预留的避让区，复制刚发生那 1 秒按钮还在原位，无视觉冲突。 */
.md .highlight code.selection {
  display: inline;
  /* 压掉给复制按钮预留的 5rem 右内边距，否则最后一行 bg 会拖一段尾巴。
     文字位置不动（inline-end 内边距只影响末端的空白），不引起重排。 */
  padding-right: 0;
  background-color: rgba(56, 161, 105, 0.22);
  border-radius: 0.2rem;
  transition: background-color 0.15s;
}