/* p3.35 B1:文章正文代码块的 macOS 窗口风格外壳——纯 CSS,不引语法高
   亮引擎(spec 的取舍:先把"精致的壳"做到位,单色/柔和配色代码,不为
   了彩色高亮引前端重库)。只在 codeWindowEnabled 开启时由 footer.php
   引入这份样式表 + code-window.js,关闭时完全不加载,代码块回退成
   Typecho 原生朴素的 <pre><code>,不需要任何 CSS 兜底(本来就没套过这
   层壳)。

   包一层 .ask-code-window 外壳、把原来的 <pre> 挪进 .ask-code-window__body
   (DOM 结构见 code-window.js),不改 <pre>/<code> 本身的标签和内容,
   所以这里的选择器都是"外壳自己的新类 + 深入一层调整原生 <pre><code>
   的观感",没有侵入式地重写 Markdown 渲染出来的结构。 */

/* 代码窗口本身固定用深色终端配色,不跟随站点浅色/深色模式切换——这是
   代码块的通行观感(GitHub/主流博客主题的代码块在浅色页面里同样是深
   色的),浅色代码配浅色页面背景反而费眼、对比度也不够。 */
.ask-code-window {
  margin: 20px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #1e1e24;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ask-code-window__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ask-code-window__dots {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.ask-code-window__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
}

.ask-code-window__dot--red { background: #ff5f56; }
.ask-code-window__dot--yellow { background: #ffbd2e; }
.ask-code-window__dot--green { background: #27c93f; }

.ask-code-window__lang {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  /* 给两侧留出交通灯/复制按钮各自的视觉宽度,语言标签才能真正居中,
     不是"看起来偏左"。 */
  margin-left: -54px;
  pointer-events: none;
  user-select: none;
}

.ask-code-window__copy {
  flex: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
}

.ask-code-window__copy:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.ask-code-window__copy.is-copied {
  background: rgba(39, 201, 63, 0.22);
  border-color: rgba(39, 201, 63, 0.4);
  color: #6adf7c;
}

/* 有真实 hover 能力的设备(鼠标/触控板)上,复制按钮平时收敛存在感,
   悬停到整个代码窗口时才亮起来——不干扰阅读代码本身。触屏设备没有
   hover 这回事,永远保持可见,不然会变成一个永远点不到的隐藏按钮。 */
@media (hover: hover) and (pointer: fine) {
  .ask-code-window__copy {
    opacity: 0;
  }
  .ask-code-window:hover .ask-code-window__copy,
  .ask-code-window__copy:focus-visible {
    opacity: 1;
  }
}

.ask-code-window__body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ask-code-window__body pre {
  margin: 0;
  padding: 16px 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow-x: visible;
  white-space: pre;
}

.ask-code-window__body code {
  display: block;
  width: max-content;
  min-width: 100%;
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.65;
  color: #e4e4ea;
  background: none;
  padding: 0;
  border-radius: 0;
  tab-size: 2;
}

/* 玻璃透明模式下把窗口本身也做成一片深色玻璃,呼应站内其它卡片的质
   感,不是唯独代码框还是一块不透明的实心色块。 */
html[data-glass-mode="on"] .ask-code-window {
  background: rgb(20 20 26 / .82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

@media (max-width: 640px) {
  .ask-code-window {
    margin: 16px -4px;
    border-radius: 10px;
  }
  .ask-code-window__body pre {
    padding: 12px 14px;
  }
  .ask-code-window__body code {
    font-size: 12.5px;
  }
}