/* 站内确认框（替代 window.confirm） --------------------------------------
 *
 * 为什么不用原生 confirm：它由浏览器绘制，字体、圆角、按钮顺序、遮罩全都跟站点
 * 无关（Windows 上还是直角灰框），在聊天页这种"看脸"的界面里非常刺眼。
 *
 * 这里用原生 <dialog> 承载：焦点陷阱、Esc 关闭、backdrop 的惰性都由浏览器负责，
 * 外观则全部由下面这些规则接管。类名统一带 pg-confirm- 前缀，避免和页面自己的
 * .modal / .btn 打架 —— 这份样式会被前台、控制台、/admin 三个地方共用。
 *
 * 变量全部带兜底值：聊天页只加载 guest.css，控制台加载 site.css + console.css，
 * 三套页面的 token 名称一致，但兜底能保证任何一个页面单独引入也不会变成透明框。
 */

.pg-confirm {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
}

.pg-confirm::backdrop {
  background: rgba(13, 21, 32, .42);
  backdrop-filter: blur(2px);
}

.pg-confirm-card {
  width: min(400px, calc(100vw - 32px));
  display: grid;
  gap: 6px;
  padding: 22px;
  border: 1px solid var(--border, #e2e6eb);
  border-radius: 16px;
  background: var(--surface, #fff);
  color: var(--text, #101820);
  box-shadow: 0 24px 60px rgba(13, 21, 32, .18);
  animation: pg-confirm-in .16s ease-out;
}

.pg-confirm-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.35;
}

/* 说明文字保留调用方写的换行：有些确认（例如会员续期）需要两段才讲得清。 */
.pg-confirm-body {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted, #6b7683);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.pg-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

/* pgPrompt 的输入框：与站内其它输入框同一套高度/圆角/聚焦环，
   绝不用浏览器默认的 2px 内嵌灰边。 */
.pg-confirm-field {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}
.pg-confirm-field span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted, #6b7683);
}
.pg-confirm-field input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border, #e2e6eb);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text, #101820);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pg-confirm-field input::placeholder { color: var(--faint, #98a3b1); }
.pg-confirm-field input:focus {
  border-color: color-mix(in srgb, var(--accent, #0a8f4d) 55%, var(--border, #e2e6eb));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0a8f4d) 14%, transparent);
}

/* 按钮自带完整样式，不依赖各页面的 .btn（三套页面的按钮尺寸并不统一）。 */
.pg-confirm-btn {
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--border, #e2e6eb);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text, #101820);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .06s ease;
}
.pg-confirm-btn:hover { background: var(--surface-2, #f7f8fa); }
.pg-confirm-btn:active { transform: translateY(1px); }
.pg-confirm-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #0a8f4d) 55%, transparent);
  outline-offset: 2px;
}

/* 主操作按语义上色：破坏性操作用危险色，普通操作用品牌绿。 */
.pg-confirm-btn.is-primary {
  border-color: transparent;
  background: var(--accent, #0a8f4d);
  color: #fff;
}
.pg-confirm-btn.is-primary:hover { background: var(--accent-dark, #077a41); }
.pg-confirm-btn.is-danger {
  border-color: transparent;
  background: var(--danger, #c0392b);
  color: #fff;
}
.pg-confirm-btn.is-danger:hover { background: color-mix(in srgb, var(--danger, #c0392b) 86%, #000); }

@keyframes pg-confirm-in {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-confirm-card { animation: none; }
}