/*
 * 25xianbao 淘口令一键复制 · 样式 v1.1.0
 *
 * 约束与取舍：
 *   - 不改正文里 <code> / <pre> 的既有样式，只往后面追加一颗按钮。
 *   - 形制跟站点一致：8px 圆角、细边框、极浅投影，不用系统默认按钮脸。
 *   - 图标是 CSS mask（data URI），不往 DOM 里塞 SVG：脚本保持纯文本节点，
 *     夹具测试不用模拟 SVG 命名空间，也少一次重排。
 *   - 两套配色分别对齐站点的浅色主题与「夜间模式适配」（同一 prefers-color-scheme 判据）。
 *   - 所有动效都在 prefers-reduced-motion: reduce 下关掉。
 */

.xb-tkl-copy {
  /* 复制图标（Feather 风格，两页叠放） */
  --xb-tkl-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='12' height='12' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1'/></svg>");
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0 6px;
  padding: 0 11px 0 9px;
  min-height: 28px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2px;
  color: #3f4a5a;
  background: #f4f6f9;
  border: 1px solid #d9dfe8;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease,
    box-shadow 0.16s ease, transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.16s ease;
}

.xb-tkl-copy::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--xb-tkl-icon) center / 13px 13px no-repeat;
  mask: var(--xb-tkl-icon) center / 13px 13px no-repeat;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* 点下去那一下的涟漪：伪元素撑满按钮，从中间涨开再淡出。 */
.xb-tkl-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}

.xb-tkl-copy.is-rippling::after {
  animation: xb-tkl-ripple 0.5s ease-out;
}

@keyframes xb-tkl-ripple {
  0% {
    opacity: 0.26;
    transform: scale(0.55);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.xb-tkl-copy:hover {
  color: #26303d;
  background: #e9eef5;
  border-color: #c6cfdd;
  box-shadow: 0 4px 10px rgba(16, 24, 40, 0.1);
  transform: translateY(-1px);
}

.xb-tkl-copy:hover::before {
  transform: rotate(-6deg) scale(1.06);
}

.xb-tkl-copy:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.xb-tkl-copy:focus-visible {
  outline: none;
  border-color: #8ea6c4;
  box-shadow: 0 0 0 3px rgba(112, 143, 184, 0.28);
}

/* 成功态：换成对勾图标 + 一次轻微的弹跳和绿色光晕，替代「什么都不发生」的沉默。 */
.xb-tkl-copy.is-ok {
  --xb-tkl-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>");
  color: #16794a;
  background: #e7f7ee;
  border-color: #b7e3c8;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: xb-tkl-pop 0.42s cubic-bezier(0.2, 0.8, 0.3, 1), xb-tkl-halo 0.6s ease-out;
}

.xb-tkl-copy.is-ok::before {
  transform: none;
  animation: xb-tkl-check 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* 失败态：不再假装成功，红字红边 + 轻微左右抖一下，比静止更抓眼。 */
.xb-tkl-copy.is-bad {
  color: #b42318;
  background: #fdecea;
  border-color: #f2c2bc;
  animation: xb-tkl-shake 0.36s ease-in-out;
}

@keyframes xb-tkl-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes xb-tkl-halo {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
  }
  100% {
    box-shadow: 0 0 0 9px rgba(34, 197, 94, 0);
  }
}

@keyframes xb-tkl-check {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-18deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.14) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes xb-tkl-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  60% {
    transform: translateX(3px);
  }
  85% {
    transform: translateX(-1px);
  }
}

/* 行内那颗夹在句子中间：短标、更紧凑，别把整句撑断。 */
.xb-tkl-copy--inline {
  min-height: 26px;
  margin-left: 4px;
  padding: 0 9px 0 7px;
  font-size: 11.5px;
}

.xb-tkl-copy--inline::before {
  width: 12px;
  height: 12px;
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
}

/* ── 代码块（pre>code）里：按钮落在代码块下方右侧，安静待着，不跟正文挤 ── */

.xb-tkl-copy--block {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 8px 0 0 auto;
  opacity: 0.78;
}

pre:hover + .xb-tkl-copy--block,
.xb-tkl-copy--block:hover,
.xb-tkl-copy--block:focus-visible,
.xb-tkl-copy--block.is-ok,
.xb-tkl-copy--block.is-bad {
  opacity: 1;
}

/* 触屏没有 hover，别让读者对着一颗半透明按钮猜。 */
@media (hover: none) {
  .xb-tkl-copy--block {
    opacity: 1;
  }
}

/* ── 夜间（与「夜间模式适配」mu-plugin 同一判据） ───────────────────────────────── */

@media (prefers-color-scheme: dark) {
  .xb-tkl-copy {
    color: #d9dee6;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.17);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  .xb-tkl-copy:hover {
    color: #f3f5f8;
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }

  .xb-tkl-copy:focus-visible {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  }

  .xb-tkl-copy.is-ok {
    color: #7ee2a8;
    background: rgba(74, 222, 128, 0.16);
    border-color: rgba(74, 222, 128, 0.42);
  }

  .xb-tkl-copy.is-bad {
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.16);
    border-color: rgba(248, 113, 113, 0.42);
  }
}

/* ── 尊重「减少动态效果」 ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .xb-tkl-copy,
  .xb-tkl-copy::before,
  .xb-tkl-copy::after,
  .xb-tkl-copy.is-ok,
  .xb-tkl-copy.is-ok::before,
  .xb-tkl-copy.is-bad {
    animation: none !important;
    transition: none !important;
  }

  .xb-tkl-copy:hover,
  .xb-tkl-copy:active,
  .xb-tkl-copy:hover::before {
    transform: none;
  }
}