/* ══════════════════════════════════════════════════════════════════════
   图文侧「AI 优化提示词」按钮样式
   ══════════════════════════════════════════════════════════════════════

   【设计】跟随整站的卡片令牌（--xhs-card-* / 覆盖层的浅色变量），
   按钮做成小尺寸胶囊，贴在提示词输入框下方右侧，不抢主体内容。

   ⚠️ 项目契约：新增的每个深色底规则都必须配一条浅色规则。
   ══════════════════════════════════════════════════════════════════════ */

.xhs-ai-prompt-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.xhs-ai-prompt-btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 11px;
  border: 1px solid #3a4756;
  border-radius: 6px;
  background: #192027;
  color: #cfe6ee;
  font: 12px inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.xhs-ai-prompt-btn:hover:not(.is-busy) { border-color: #7adbe9; background: #1d2b33; color: #e9fcff; }
.xhs-ai-prompt-btn.is-small { height: 24px; padding: 0 9px; font-size: 11px; }
.xhs-ai-prompt-btn.is-busy { opacity: .7; cursor: progress; }
.xhs-ai-prompt-btn.is-done { border-color: #4a9d78; background: #16271f; color: #8ce0b6; }
.xhs-ai-prompt-btn.is-error { border-color: #8c4a42; background: #2a1b19; color: #f0a89c; }

/* ── 浅色主题 ── */
html[data-vr-theme="light"] .xhs-ai-prompt-btn,
body[data-xhs-theme="light"] .xhs-ai-prompt-btn {
  border-color: #f2dade;
  background: #ffffff;
  color: #5d6167;
}
html[data-vr-theme="light"] .xhs-ai-prompt-btn:hover:not(.is-busy),
body[data-xhs-theme="light"] .xhs-ai-prompt-btn:hover:not(.is-busy) {
  border-color: #e8452f;
  background: #fbf0f1;
  color: #e8452f;
}
html[data-vr-theme="light"] .xhs-ai-prompt-btn.is-done,
body[data-xhs-theme="light"] .xhs-ai-prompt-btn.is-done {
  border-color: #9dd6b8;
  background: #f2fbf6;
  color: #1f9d6d;
}
html[data-vr-theme="light"] .xhs-ai-prompt-btn.is-error,
body[data-xhs-theme="light"] .xhs-ai-prompt-btn.is-error {
  border-color: #e9a99c;
  background: #fdf3f4;
  color: #d8402f;
}