/* ============================================================
   玄学工具箱 · AI 解析卡片样式  v2.0
   设计目标：让 AI 卡片「融入」各工具的排盘界面，并提升其精致度与可读性。
   - 通过变量回退链同时适配两套设计体系：
     · xp 体系（八字/紫微/六爻/六壬）：--panel/--line/--gold2/--shadow…
     · card 体系（奇门/太乙/金口/梅花…）：--card-2/--gold-line/--gold-soft/--r…
   - 卡片插在内容列内部，与排盘结果卡同宽同栏；外观沿用各页卡片质感。
   - v2.0 重点：鎏金封边、印章式标记、分节标题、金色项目符号、断语卡片、
     一体化按钮与状态条，整体更像一份「命理批注」。
   ============================================================ */

/* ---------- 顶部导航中的「AI 解析」入口（滚动定位到解析面板） ---------- */
.xz-ai-nav {
  --g:  var(--gold, #d4a84c);
  --g2: var(--gold2, var(--gold-soft, #e8cd8a));
  --mt: var(--muted, var(--paper-mute, #b9ab8b));
  --ln: var(--line, var(--gold-line, rgba(212, 168, 76, .22)));
  --ln2:var(--line2, var(--gold-dim, rgba(212, 168, 76, .45)));
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--ln2);
  background: linear-gradient(135deg, rgba(212, 168, 76, .22), rgba(212, 168, 76, .07));
  color: var(--g2);
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 12px rgba(0, 0, 0, .18);
  transition: transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.xz-ai-nav > i {
  font-style: normal; line-height: 1; font-size: 12px;
  color: var(--g2); filter: drop-shadow(0 0 5px rgba(212, 168, 76, .5));
}
.xz-ai-nav:hover {
  border-color: var(--g);
  background: linear-gradient(135deg, rgba(212, 168, 76, .32), rgba(212, 168, 76, .12));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 16px rgba(212, 168, 76, .22);
}
.xz-ai-nav:active { transform: scale(.95); }
/* xp-top 右侧分组：让「下一项」与「AI 解析」并排靠右，标题仍居中 */
.xz-ai-navgrp { display: inline-flex; align-items: center; gap: 10px; }

/* ============================================================
   解析面板主体
   ============================================================ */
.xz-ai-panel {
  /* —— 与宿主对齐的变量（缺失时回退到另一体系或安全默认值）—— */
  --g:    var(--gold, #d4a84c);
  --g2:   var(--gold2, var(--gold-soft, #e8cd8a));
  --pp:   var(--paper, #efe6d2);
  --mt:   var(--muted, var(--paper-mute, #9a8f78));
  --ln:   var(--line, var(--gold-line, rgba(212, 168, 76, .22)));
  --ln2:  var(--line2, var(--gold-dim, rgba(212, 168, 76, .42)));
  --c1:   var(--panel, var(--card-2, rgba(255, 244, 214, .055)));
  --c2:   var(--panel2, rgba(255, 255, 255, .018));
  --rad:  var(--r, 20px);
  --shdw: var(--shadow, 0 14px 36px rgba(0, 0, 0, .30));
  --bad:  var(--bad, var(--red, #d26b5d));
  --good: var(--good, var(--green, #74b982));
  --warn: #e2b85a;
  --ink:  var(--bg, var(--ink, #14110c));
  --ff: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ff-serif: var(--serif, "Songti SC", "Noto Serif CJK SC", "STSong", serif);

  position: relative;
  box-sizing: border-box;
  /* 作为内容列里的一张卡片：同宽、同栏、紧随结果之后 */
  margin: 16px 0 0;
  padding: 18px 17px 16px;
  border: 1px solid var(--ln2);
  border-radius: var(--rad);
  background:
    radial-gradient(140% 90% at 86% -12%, rgba(212, 168, 76, .12), transparent 58%),
    linear-gradient(158deg, var(--c1), var(--c2));
  box-shadow: var(--shdw), inset 0 1px 0 rgba(255, 255, 255, .05);
  color: var(--pp);
  font-family: var(--ff);
  scroll-margin-top: 118px;   /* 顶部 sticky 导航/页签留白，滚动定位不被遮挡 */
}
.xz-ai-panel * { box-sizing: border-box; }
/* [hidden] 必须始终生效（覆盖下方对 status/按钮等设置的 display） */
.xz-ai-panel [hidden] { display: none !important; }

/* 鎏金封边：顶部居中金线，作为这张「批注卡」的标识 */
.xz-ai-panel::before {
  content: '';
  position: absolute; left: 20px; right: 20px; top: -1px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ln2) 18%, var(--g) 50%, var(--ln2) 82%, transparent);
  opacity: .95;
}

/* 入场动画 + 滚动定位时的高亮闪烁 */
@media (prefers-reduced-motion: no-preference) {
  .xz-ai-panel { animation: xzaiRise .5s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes xzaiRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.xz-ai-panel.xzai-flash { animation: xzaiFlash 1.1s ease; }
@keyframes xzaiFlash {
  0%   { box-shadow: var(--shdw), 0 0 0 0 rgba(212, 168, 76, .0); }
  22%  { box-shadow: var(--shdw), 0 0 0 4px rgba(212, 168, 76, .42), 0 0 26px rgba(212, 168, 76, .30); }
  100% { box-shadow: var(--shdw), 0 0 0 0 rgba(212, 168, 76, .0); }
}

/* —— 头部：印章 + 标题 + 右侧工具，底部以金线分节 —— */
.xz-ai-panel .xzai-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--ln);
}
.xz-ai-panel .xzai-mark {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(255, 244, 214, .5);
  background: linear-gradient(150deg, var(--g2), var(--g) 54%, #9b6e21);
  color: #2a1b0b;
  font-family: var(--ff-serif);
  font-size: 22px; line-height: 1; font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 3px rgba(212, 168, 76, .12);
}
.xz-ai-panel .xzai-mark > i { font-style: normal; }
/* 印章微光：缓慢呼吸，点出「智能」气质而不喧宾夺主 */
@media (prefers-reduced-motion: no-preference) {
  .xz-ai-panel .xzai-mark { animation: xzaiSeal 3.6s ease-in-out infinite; }
  @keyframes xzaiSeal {
    0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 3px rgba(212,168,76,.12); }
    50%      { box-shadow: 0 6px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 4px rgba(212,168,76,.22), 0 0 16px rgba(212,168,76,.28); }
  }
}
.xz-ai-panel .xzai-titles { flex: 1 1 auto; min-width: 0; }
.xz-ai-panel .xzai-titles b {
  display: block;
  font-family: var(--ff-serif);
  color: var(--g2);
  font-size: 17px; letter-spacing: 3px; line-height: 1.2;
}
.xz-ai-panel .xzai-titles small {
  display: block;
  color: var(--mt);
  font-size: 11.5px; margin-top: 3px; letter-spacing: .04em;
}
.xz-ai-panel .xzai-tools { flex: 0 0 auto; display: flex; gap: 7px; }
.xz-ai-panel .xzai-gear,
.xz-ai-panel .xzai-lock {
  width: 31px; height: 31px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--ln);
  background: rgba(0, 0, 0, .2);
  color: var(--mt);
  font-size: 14px; line-height: 1; text-decoration: none; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .2s ease, background .2s ease;
}
.xz-ai-panel .xzai-gear:hover { color: var(--g2); border-color: var(--ln2); background: rgba(212, 168, 76, .1); transform: rotate(40deg); }
.xz-ai-panel .xzai-lock:hover { color: var(--bad); border-color: rgba(210, 107, 93, .5); background: rgba(210, 107, 93, .08); }
.xz-ai-panel .xzai-lock:active { transform: scale(.92); }

/* —— 引导提示：头部下方一行说明，呼应「依据本盘解读」 —— */
.xz-ai-panel .xzai-intro {
  margin: 13px 0 0;
  font-size: 12.5px; line-height: 1.7;
  color: var(--mt); letter-spacing: .02em;
}
.xz-ai-panel .xzai-intro::before {
  content: '✦'; margin-right: .5em; color: var(--g2); opacity: .8; font-size: .9em;
}

/* —— 操作按钮：主按钮鎏金满栏 CTA，次按钮描金 —— */
.xz-ai-panel .xzai-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.xz-ai-panel .xzai-actions button {
  appearance: none; -webkit-appearance: none;
  border-radius: 13px;
  padding: 12px 16px;
  font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: .05em;
  cursor: pointer;
  border: 1px solid var(--ln2);
  background: linear-gradient(180deg, rgba(255, 244, 214, .07), rgba(0, 0, 0, .18));
  color: var(--g2);
  transition: transform .15s ease, border-color .2s ease, background .2s ease, opacity .2s ease, filter .2s ease, box-shadow .2s ease;
}
.xz-ai-panel .xzai-actions button:active { transform: scale(.98); }
.xz-ai-panel .xzai-actions button:disabled { opacity: .6; cursor: default; }
/* 主按钮：满栏鎏金 */
.xz-ai-panel .xzai-run {
  flex: 1 1 100%;
  border-color: rgba(255, 244, 214, .45) !important;
  background: linear-gradient(135deg, var(--g2), var(--g) 52%, #b88b35) !important;
  color: #2a1b0b !important;
  font-weight: 800; letter-spacing: .2em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
  box-shadow: 0 10px 26px rgba(212, 168, 76, .26), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.xz-ai-panel .xzai-run::before { content: '✦'; margin-right: .5em; font-size: .92em; opacity: .82; }
.xz-ai-panel .xzai-run:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
/* 次按钮：复制 / 重新解析 并排 */
.xz-ai-panel .xzai-copy,
.xz-ai-panel .xzai-regen { flex: 1 1 0; min-width: 130px; }
.xz-ai-panel .xzai-copy:hover,
.xz-ai-panel .xzai-regen:hover { border-color: var(--g); background: linear-gradient(180deg, rgba(212, 168, 76, .14), rgba(0, 0, 0, .16)); }
/* 停止：满栏告警色 */
.xz-ai-panel .xzai-stop {
  flex: 1 1 100%;
  border-color: rgba(210, 107, 93, .5) !important;
  color: var(--bad) !important;
  background: rgba(210, 107, 93, .08) !important;
}

/* —— 状态条：胶囊样式，左侧呼吸圆点 —— */
.xz-ai-panel .xzai-status {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--ln);
  background: rgba(0, 0, 0, .22);
  font-size: 12.5px; color: var(--mt); letter-spacing: .02em;
}
.xz-ai-panel .xzai-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--mt); flex: 0 0 auto;
}
.xz-ai-panel .xzai-status.ok { color: var(--good); border-color: rgba(116, 185, 130, .35); background: rgba(116, 185, 130, .08); }
.xz-ai-panel .xzai-status.ok::before { background: var(--good); }
.xz-ai-panel .xzai-status.warn { color: var(--warn); border-color: rgba(226, 184, 90, .38); background: rgba(226, 184, 90, .08); }
.xz-ai-panel .xzai-status.warn::before { background: var(--warn); }
.xz-ai-panel .xzai-status.err { color: var(--bad); border-color: rgba(210, 107, 93, .42); background: rgba(210, 107, 93, .08); }
.xz-ai-panel .xzai-status.err::before { background: var(--bad); }
.xz-ai-panel .xzai-status:not(.ok):not(.err):not(.warn)::before { animation: xzaiPulse 1.1s ease-in-out infinite; }
@keyframes xzaiPulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

/* —— 输出区：批注正文，统一字距行距与分节排版 —— */
.xz-ai-panel .xzai-out {
  margin-top: 14px;
  padding: 16px 17px;
  border-radius: 15px;
  border: 1px solid var(--ln);
  background:
    linear-gradient(180deg, rgba(212, 168, 76, .045), transparent 64px),
    rgba(0, 0, 0, .18);
  color: var(--pp);
  font-size: 14.5px; line-height: 1.92; word-break: break-word;
}
.xz-ai-panel .xzai-out > *:first-child { margin-top: 0; }
.xz-ai-panel .xzai-out > *:last-child { margin-bottom: 0; }
.xz-ai-panel .xzai-out p { margin: 0 0 11px; }

/* 分节标题：左侧鎏金竖条 + 衬线 */
.xz-ai-panel .xzai-out .xzai-h {
  position: relative;
  padding-left: 14px;
  margin: 19px 0 10px;
  font-family: var(--ff-serif);
  color: var(--g2);
  font-size: 16px; letter-spacing: .06em; line-height: 1.4;
}
.xz-ai-panel .xzai-out h6.xzai-h { font-size: 14px; }
.xz-ai-panel .xzai-out .xzai-h::before {
  content: '';
  position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--g2), var(--g));
  box-shadow: 0 0 8px rgba(212, 168, 76, .35);
}

/* 无序列表：鎏金菱形项目符号 */
.xz-ai-panel .xzai-out .xzai-ul { list-style: none; margin: 0 0 12px; padding-left: 2px; }
.xz-ai-panel .xzai-out .xzai-ul > li { position: relative; padding-left: 20px; margin: 7px 0; }
.xz-ai-panel .xzai-out .xzai-ul > li::before {
  content: ''; position: absolute; left: 3px; top: .72em;
  width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg);
  background: linear-gradient(135deg, var(--g2), var(--g));
  box-shadow: 0 0 6px rgba(212, 168, 76, .4);
}
/* 有序列表：鎏金序号牌 */
.xz-ai-panel .xzai-out .xzai-ol { list-style: none; margin: 0 0 12px; padding-left: 0; counter-reset: xzai-ol; }
.xz-ai-panel .xzai-out .xzai-ol > li { position: relative; padding-left: 30px; margin: 8px 0; counter-increment: xzai-ol; }
.xz-ai-panel .xzai-out .xzai-ol > li::before {
  content: counter(xzai-ol);
  position: absolute; left: 0; top: .04em;
  width: 21px; height: 21px;
  display: grid; place-items: center;
  border-radius: 7px;
  font-family: var(--ff); font-size: 11.5px; font-weight: 700;
  color: #2a1b0b;
  background: linear-gradient(135deg, var(--g2), var(--g));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.xz-ai-panel .xzai-out li { line-height: 1.85; }

.xz-ai-panel .xzai-out strong { color: var(--g2); font-weight: 700; }
.xz-ai-panel .xzai-out em { color: var(--pp); font-style: italic; opacity: .92; }
.xz-ai-panel .xzai-out code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em;
  padding: 1px 6px; border-radius: 6px;
  background: rgba(212, 168, 76, .14); color: var(--g2);
}
.xz-ai-panel .xzai-out .xzai-pre {
  overflow: auto; padding: 11px 13px; margin: 0 0 11px;
  border-radius: 10px; border: 1px solid var(--ln);
  background: rgba(0, 0, 0, .4);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6;
}

/* 断语 / 总结：鎏金高亮卡片 */
.xz-ai-panel .xzai-out .xzai-bq {
  position: relative;
  margin: 16px 0 6px;
  padding: 13px 15px 13px 17px;
  border: 1px solid var(--ln2); border-left: 3px solid var(--g);
  border-radius: 0 13px 13px 0;
  background: linear-gradient(120deg, rgba(212, 168, 76, .13), rgba(212, 168, 76, .03));
  color: var(--pp);
  font-family: var(--ff-serif); font-size: 14.5px; line-height: 1.85;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.xz-ai-panel .xzai-out .xzai-hr { border: none; border-top: 1px solid var(--ln); margin: 15px 0; }
.xz-ai-panel .xzai-out .xzai-err { color: var(--bad); margin: 0 0 8px; font-weight: 600; }
.xz-ai-panel .xzai-out .xzai-err-tip { color: var(--mt); font-size: 12.5px; margin: 0; line-height: 1.7; }

/* —— 脚注：金线分隔 + 提示 —— */
.xz-ai-panel .xzai-foot {
  margin: 15px 0 0; padding-top: 12px;
  border-top: 1px solid var(--ln);
  font-size: 11.5px; color: var(--mt); opacity: .92; line-height: 1.65;
}
.xz-ai-panel .xzai-foot::before { content: '※ '; opacity: .7; }

/* —— 响应式 —— */
@media (max-width: 560px) {
  .xz-ai-panel { padding: 16px 14px 14px; }
  .xz-ai-panel .xzai-head { gap: 10px; }
  .xz-ai-panel .xzai-out { padding: 14px; }
  .xz-ai-nav > span { display: inline; }
}
@media (max-width: 380px) {
  .xz-ai-panel .xzai-mark { width: 38px; height: 38px; font-size: 19px; border-radius: 11px; }
  .xz-ai-panel .xzai-titles b { font-size: 15.5px; letter-spacing: 2px; }
  .xz-ai-panel .xzai-titles small { font-size: 11px; }
  .xz-ai-panel .xzai-copy,
  .xz-ai-panel .xzai-regen { min-width: 0; }
  /* 极窄屏：顶栏入口仅留图标，省空间 */
  .xz-ai-nav { padding: 6px 9px; }
  .xz-ai-nav > span { display: none; }
}

/* —— 打印 —— */
@media print {
  .xz-ai-panel .xzai-actions, .xz-ai-panel .xzai-tools, .xz-ai-nav { display: none !important; }
  .xz-ai-panel { background: #fff !important; color: #111 !important; box-shadow: none !important; border-color: #ccc !important; animation: none !important; }
  .xz-ai-panel::before { display: none !important; }
  .xz-ai-panel .xzai-out { background: #fff !important; color: #111 !important; }
  .xz-ai-panel .xzai-out .xzai-h,
  .xz-ai-panel .xzai-out strong { color: #7a5a12 !important; }
}