/* ============================================================
 * WWBEE / drawer-xianbao.css
 *   线报页「不离页看详情」抽屉 · 三主题公共 chrome
 *   主题子页 css 只覆写视觉(背景 / 字体 / 按钮 hover / 边框),
 *   **不动 box 模型**(R4 红线)
 *
 *   选择器全部以 .drawer-xb__ 前缀,不污染 .thread / .entry / .stream 等主题专属类
 * ============================================================ */

/* ========== 遮罩 ========== */
.drawer-xb {
  position: fixed; inset: 0;
  z-index: 9000;
  pointer-events: none;
}
.drawer-xb.is-open { pointer-events: auto; }
.drawer-xb__scrim {
  position: absolute; inset: 0;
  background: rgba(8, 10, 18, 0);
  transition: background .25s ease;
  pointer-events: auto;          /* 显式:打开后 scrim 必须能接 click */
  cursor: pointer;               /* 鼠标移到 scrim 上提示可点击 */
}
.drawer-xb.is-open .drawer-xb__scrim { background: rgba(8, 10, 18, .55); }

/* ========== 抽屉面板 ========== */
.drawer-xb__panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(560px, 92vw);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
  pointer-events: auto;
}
.drawer-xb.is-open .drawer-xb__panel { transform: translateX(0); }

/* ========== 抽屉内容 ========== */
.drawer-xb__body {
  padding: 28px 28px 36px;
  display: flex; flex-direction: column; gap: 14px;
}
.drawer-xb__body > * { min-width: 0; }

/* 加载中 / 错误 */
.drawer-xb__panel .drawer__loading,
.drawer-xb__panel .drawer__error {
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  opacity: .7;
}
.drawer-xb__panel .drawer__error { color: #c44; }

/* 头:chip 群 */
.drawer-xb__head {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px dashed currentColor;
}
.drawer-xb__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.drawer-xb__chip {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px;
  letter-spacing: .04em;
  border: 1px solid currentColor;
  border-radius: 999px;
}
.drawer-xb__qun { font-size: 12px; opacity: .65; }

/* 主图 */
.drawer-xb__pic {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(0,0,0,.04);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.drawer-xb__pic img {
  width: 100%; height: 100%;
  object-fit: contain;
}

/* 时间戳 */
.drawer-xb__time {
  font-size: 12px; opacity: .55;
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* 完整文案 */
.drawer-xb__content {
  font-size: 14px; line-height: 1.6;
  display: flex; flex-direction: column; gap: 4px;
}
.drawer-xb__content p { margin: 0; }
.drawer-xb__content .drawer-xb__muted { opacity: .5; font-style: italic; }

/* 文案里出现的 URL → 转链 chip(<a class="drawer-xb__inline-link">)
 *   默认 <a> 有下划线 + hover 变蓝,这里压掉:
 *     · 不用浏览器默认下划线(text-decoration: none)
 *     · 颜色保持主题色不变(主题子页可选覆盖)
 *     · hover 给个细微视觉反馈(透明度 / 下划线动画)即可
 *   注意:此样式只作用于 .drawer-xb__inline-link,不影响全局 <a>
 */
.drawer-xb__inline-link {
  text-decoration: none;     /* 关掉下划线 */
  display: inline-block;     /* 让 padding / 圆角生效 */
  white-space: nowrap;
  color: inherit;            /* 跟随文案颜色,不强制变蓝 */
  transition: opacity 0.15s ease;
}
.drawer-xb__inline-link:hover {
  text-decoration: none;     /* hover 也不出下划线(防主题 css 误覆盖) */
  opacity: 0.6;              /* 简单 hover 反馈 */
}
.drawer-xb__inline-link:focus-visible {
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* 文案里内联的淘口令 */
.drawer-xb__tkl-inline {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  background: rgba(255,255,255,.08);
  padding: 1px 6px;
  border: 1px dashed currentColor;
  border-radius: 4px;
  cursor: pointer;
  word-break: break-all;
}

/* 淘口令块(主) */
.drawer-xb__cmd {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid currentColor;
  font-size: 13px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.drawer-xb__cmd-label { font-weight: 700; flex-shrink: 0; font-size: 11px; letter-spacing: .04em; }
.drawer-xb__cmd-text {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-xb__cmd-copy {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  transition: background .12s ease, color .12s ease;
}
.drawer-xb__cmd-copy.is-copied { opacity: .55; }

/* 原 URL 块 */
.drawer-xb__url {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px dashed currentColor;
  font-size: 12px;
  opacity: .75;
}
.drawer-xb__url-label { font-weight: 700; flex-shrink: 0; font-size: 11px; }
.drawer-xb__url-link {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: underline;
  opacity: .85;
}

/* 底部按钮行 */
.drawer-xb__actions {
  display: flex; gap: 10px;
  padding-top: 8px;
}
.drawer-xb__action {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s ease, color .12s ease, opacity .12s ease;
}
.drawer-xb__action.is-copied { opacity: .55; }

/* 元数据尾巴 */
.drawer-xb__meta {
  font-size: 11px;
  opacity: .45;
  font-family: var(--font-mono, ui-monospace, monospace);
  display: flex;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px dashed currentColor;
}

/* ========== 响应式:窄屏微调,不强制占满 ========== */
@media (max-width: 600px) {
  /* 保持 panel ≤ 92vw,让出 8vw scrim 给用户点击关闭(参考 drawer.js 商品详情行为)
     — 之前 width: 100vw 会让 scrim 完全被遮挡,手机端点不开返回 */
  .drawer-xb__panel { width: min(560px, 92vw); }
  .drawer-xb__body { padding: 22px 18px 28px; }
}