/* ziwei/assets/ziwei-ai.css —— 紫微斗数 AI 解盘卡片（照 daliuren/assets/daliuren.css 的 B 期 AI 段，--lr- 换 --zw-；行为在 ziwei-ai.js）
   用到 ziwei.css 的基础变量（--zw-card、--zw-text、--zw-primary…），本文件只新增 AI 区专用变量：
   --zw-ai-bar 左竖条、--zw-ai-head-hover 标题栏悬停底、--zw-ai-st-<态>-bg / -fg 状态胶囊（文字 + 颜色双提示；idle、login、down 共用灰）、
   --zw-locked 锁定输入框底、--zw-ububble / --zw-on-ububble 用户气泡。取值同六壬（宣纸墨色）。
   对比度由 _dev/project2026/ziwei/tests/contrast_ai.mjs 检查 */
:root {
  --zw-ai-bar: #b3361f; --zw-ai-head-hover: #f4ede1;
  --zw-ai-st-gray-bg: #ebe5d9; --zw-ai-st-gray-fg: #4a4239;
  --zw-ai-st-ready-bg: #dff0e5; --zw-ai-st-ready-fg: #1a5e40;
  --zw-ai-st-chat-bg: #b3361f; --zw-ai-st-chat-fg: #ffffff;
  --zw-ai-st-stale-bg: #fbe8c4; --zw-ai-st-stale-fg: #7c3a06;
  --zw-locked: #efe9dc; --zw-ububble: #f6e2da; --zw-on-ububble: #2b2622;
}
[data-theme="dark"] {
  --zw-ai-bar: #e0a34a; --zw-ai-head-hover: #2a251f;
  --zw-ai-st-gray-bg: #3a332a; --zw-ai-st-gray-fg: #d6cbb9;
  --zw-ai-st-ready-bg: #1d3a2c; --zw-ai-st-ready-fg: #7ee0b0;
  --zw-ai-st-chat-bg: #a83a24; --zw-ai-st-chat-fg: #ffffff;
  --zw-ai-st-stale-bg: #45351a; --zw-ai-st-stale-fg: #f5d58a;
  --zw-locked: #2a251f; --zw-ububble: #43261c; --zw-on-ububble: #f1e6da;
}
.zw-ai { border-left: 4px solid var(--zw-ai-bar); padding: 0; overflow: hidden; }
.zw-ai-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: none; color: var(--zw-text);
              font-family: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 0 var(--zw-split); }
.zw-ai-head[aria-expanded="true"] { box-shadow: none; border-bottom: 1px solid var(--zw-split); }
.zw-ai-head:hover { background: var(--zw-ai-head-hover); }
.zw-ai-head:focus-visible { outline: 2px solid var(--zw-focus); outline-offset: -2px; }
.zw-ai-mark { flex: none; color: var(--zw-ai-bar); font-size: 16px; }
.zw-ai-titles { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.zw-ai-title { flex: none; font-size: 16px; font-weight: 700; }
.zw-ai-sub { min-width: 0; font-size: 12px; color: var(--zw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zw-ai-status { flex: none; font-size: 12px; line-height: 1.6; padding: 1px 8px; border-radius: 10px; white-space: nowrap; background: var(--zw-ai-st-gray-bg); color: var(--zw-ai-st-gray-fg); }
#zw-ai[data-state="ready"] .zw-ai-status { background: var(--zw-ai-st-ready-bg); color: var(--zw-ai-st-ready-fg); }
#zw-ai[data-state="chat"] .zw-ai-status { background: var(--zw-ai-st-chat-bg); color: var(--zw-ai-st-chat-fg); }
#zw-ai[data-state="stale"] .zw-ai-status { background: var(--zw-ai-st-stale-bg); color: var(--zw-ai-st-stale-fg); }
.zw-ai-arrow { flex: none; font-size: 11px; color: var(--zw-faint); transition: transform .22s; }
.zw-ai-head[aria-expanded="true"] .zw-ai-arrow { transform: rotate(180deg); }
/* 折叠动画：JS 展开时先去掉 hidden、下一帧加 .zw-ai-shown；收起时先去掉 .zw-ai-shown、过渡结束再设 hidden */
.zw-ai-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.zw-ai-body.zw-ai-shown { grid-template-rows: 1fr; }
.zw-ai-body[hidden] { display: none; }
.zw-ai-inner { overflow: hidden; min-height: 0; padding: 0 14px 14px; }
.zw-ai-note { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--zw-sub); }
.zw-ai-note .zw-btn { display: inline-block; margin-left: 6px; padding: 5px 16px; text-decoration: none; }
.zw-ai-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--zw-split); margin-top: 6px; }
.zw-ai-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px 8px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--zw-muted); cursor: pointer; font-family: inherit; }
.zw-ai-tab:hover:not(:disabled) { color: var(--zw-text); }
.zw-ai-tab[aria-selected="true"] { color: var(--zw-accent); border-bottom-color: var(--zw-accent); }
.zw-ai-tab:disabled { cursor: not-allowed; opacity: .6; }
.zw-ai-tab:focus-visible { outline: 2px solid var(--zw-focus); outline-offset: 1px; }
.zw-ai-dot { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--zw-primary); vertical-align: 2px; }
.zw-ai-dot[hidden] { display: none; }
.zw-ai-panel { padding-top: 10px; font-size: 14px; }
.zw-ai-panel[hidden] { display: none; }
/* 设置表单 */
.zw-ai-label { display: block; margin: 8px 0 4px; font-size: 13px; color: var(--zw-sub); }
.zw-ai-label:first-child { margin-top: 0; }
.zw-ai-question { display: block; width: 100%; min-height: 72px; box-sizing: border-box; padding: 8px 10px; font-size: 14px; line-height: 1.6; font-family: inherit; resize: vertical;
                  background: var(--zw-input-bg); color: var(--zw-text); border: 1px solid var(--zw-input-line); border-radius: 6px; }
.zw-ai-panel select { padding: 6px 8px; font-size: 14px; font-family: inherit; background: var(--zw-input-bg); color: var(--zw-text); border: 1px solid var(--zw-input-line); border-radius: 4px; max-width: 100%; }
.zw-ai-panel select:disabled { opacity: .55; cursor: not-allowed; border-style: dashed; } /* 风格下拉在对话、教学模式或选了大师时禁用 */
.zw-ai-question:focus-visible, .zw-ai-panel select:focus-visible { outline: 2px solid var(--zw-focus); outline-offset: 1px; }
#zw-ai-teach-wrap[hidden] { display: none; }
.zw-ai-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.zw-ai-pill { position: relative; display: inline-flex; cursor: pointer; }
.zw-ai-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.zw-ai-pill span { padding: 4px 14px; border-radius: 14px; font-size: 13px; background: var(--zw-tag-bg); color: var(--zw-text); outline: 1px solid var(--zw-input-line); outline-offset: -1px; }
.zw-ai-pill:hover span { outline-color: var(--zw-accent); }
.zw-ai-pill input:checked + span { background: var(--zw-primary); color: var(--zw-on-primary); outline-color: var(--zw-primary); }
.zw-ai-pill input:focus-visible + span { box-shadow: 0 0 0 2px var(--zw-card), 0 0 0 4px var(--zw-focus); }
.zw-ai-pill input:disabled + span { opacity: .55; cursor: not-allowed; }
/* 大师卡片（没有 ziwei3 大师时整块 hidden） */
.zw-ai-mbox { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--zw-tag-bg); outline: 1px solid var(--zw-split); outline-offset: -1px; }
.zw-ai-mbox[hidden] { display: none; }
.zw-ai-master-head { display: flex; align-items: center; gap: 10px; }
.zw-ai-master-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 2px; border: 0; background: none; color: var(--zw-text); font-size: 14px; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; }
.zw-ai-master-toggle:focus-visible, .zw-ai-recommend:focus-visible { outline: 2px solid var(--zw-focus); outline-offset: 1px; }
.zw-ai-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid var(--zw-split); box-sizing: border-box; opacity: .5; filter: grayscale(70%); transition: opacity .3s, filter .3s, border-color .3s; }
.zw-ai-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zw-ai-avatar.zw-ai-avatar-half { opacity: .9; filter: grayscale(20%); }
.zw-ai-avatar.zw-ai-avatar-on { opacity: 1; filter: none; border-color: var(--zw-accent); box-shadow: 0 0 0 3px var(--zw-sel-bg); }
.zw-ai-master-text { min-width: 0; }
.zw-ai-hint { font-size: 12px; font-weight: normal; color: var(--zw-muted); }
.zw-ai-hint.zw-ai-cancel { color: var(--zw-danger); }
.zw-ai-recommend { flex: none; padding: 3px 10px; font-size: 12px; line-height: 1.6; border-radius: 12px; border: 1px solid var(--zw-accent); background: var(--zw-card); color: var(--zw-accent); font-family: inherit; cursor: pointer; }
.zw-ai-recommend:hover { background: var(--zw-sel-bg); }
.zw-ai-recommend[hidden] { display: none; }
.zw-ai-master-panel { padding: 6px 0 2px; }
.zw-ai-master-panel[hidden], #zw-ai-category[hidden] { display: none; }
.zw-ai-master-panel select { display: block; width: 100%; margin-bottom: 6px; }
.zw-ai-methods { display: flex; flex-wrap: wrap; gap: 6px; }
.zw-ai-methods:empty { display: none; }
/* 回复风格、语言、应期：大师卡片外下方一行三列；内容宽 <480px 上下排（容器查询） */
.zw-ai-opts { container-type: inline-size; margin-top: 10px; }
.zw-ai-opts-in { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 0 12px; }
@container (max-width: 479px) { .zw-ai-opts-in { grid-template-columns: 1fr; } }
.zw-ai-opt { min-width: 0; }
.zw-ai-opt select { width: 100%; }
.zw-ai-error { margin: 8px 0 0; color: var(--zw-danger); font-size: 14px; }
.zw-ai-error:empty { display: none; }
.zw-ai-start { display: block; width: 100%; margin-top: 12px; padding: 9px 16px; }
/* 聊天面板：改动提示条与空状态 */
.zw-ai-stale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; padding: 6px 10px; font-size: 13px; line-height: 1.5;
               color: var(--zw-warn-fg); background: var(--zw-warn-bg); border: 1px solid var(--zw-warn-line); border-radius: 6px; }
.zw-ai-stale[hidden], .zw-ai-note[hidden], #chatPanel[hidden] { display: none; }
#zw-ai-chat-empty { margin-top: 2px; }
/* 消息区高度：组件默认 310–630px；矮屏按视口降低，免得输入栏离开视口 */
#chatPanel .chat-messages-container { min-height: clamp(200px, calc(100vh - 360px), 420px); }

/* 平台聊天组件本身写死蓝灰浅色：白天、暗黑两套都按 #chatPanel 作用域 !important 覆盖成宣纸墨色（照六壬） */
#chatPanel { --zhuti_clor: var(--zw-primary); --zhuti_clor_hover: var(--zw-primary-hover); }
#chatPanel .ai-chat-panel-wrapper { background: var(--zw-card) !important; outline: 1px solid var(--zw-input-line); outline-offset: -1px; }
#chatPanel .ai-chat-header { background: var(--zw-primary) !important; }
#chatPanel .chat-messages-container { background: var(--zw-bg) !important; }
#chatPanel .message-bubble.ai .message-content { background: var(--zw-card) !important; color: var(--zw-text) !important; box-shadow: inset 0 0 0 1px var(--zw-input-line) !important; }
#chatPanel .message-bubble.ai .message-content h1, #chatPanel .message-bubble.ai .message-content h2,
#chatPanel .message-bubble.ai .message-content h3, #chatPanel .message-bubble.ai .message-content strong { color: var(--zw-accent) !important; }
#chatPanel .message-bubble.ai .message-content a { color: var(--zw-accent) !important; }
#chatPanel .message-bubble.user .message-content { background: var(--zw-ububble) !important; color: var(--zw-on-ububble) !important; box-shadow: inset 0 0 0 1px var(--zw-input-line) !important; }
#chatPanel .ai-msg-actions { border-top-color: var(--zw-split) !important; }
#chatPanel .ai-action-btn { color: var(--zw-sub) !important; border-color: var(--zw-input-line) !important; background: transparent !important; }
#chatPanel .ai-action-btn:hover { background: var(--zw-sel-bg) !important; }
#chatPanel .rating-popup { background: var(--zw-card) !important; border-color: var(--zw-input-line) !important; }
#chatPanel .rate-opt-btn { color: var(--zw-text) !important; border-color: var(--zw-input-line) !important; }
#chatPanel .chat-footer { background: var(--zw-card) !important; border-top-color: var(--zw-split) !important; }
#chatPanel .chat-input, #chatPanel #chat-input { background: var(--zw-input-bg) !important; color: var(--zw-text) !important; border-color: var(--zw-input-line) !important; }
#chatPanel #chat-input.zw-ai-locked { background: var(--zw-locked) !important; color: var(--zw-muted) !important; }
#chatPanel #chat-send-btn:disabled { background: var(--zw-disabled) !important; }
#chatPanel .ai-chat-disclaimer { background: var(--zw-card) !important; color: var(--zw-muted) !important; }
#chatPanel .loading-timer-text, #chatPanel .message-content div[style*="color:#888"] { color: var(--zw-muted) !important; }
#chatPanel .user-points-badge { background: var(--zw-card) !important; color: var(--zw-text) !important; }
#chatPanel .message-content > button:not([class]) { background: var(--zw-card) !important; color: var(--zw-danger) !important; border-color: var(--zw-danger) !important; }
/* 提问模板按钮（组件挪进问题框，在 #chatPanel 外）与模板弹窗（挂在 body 上） */
.preset-q-trigger-btn { background: var(--zw-primary) !important; color: var(--zw-on-primary) !important; opacity: 1 !important; }
.preset-q-trigger-btn:hover { background: var(--zw-primary-hover) !important; }
.preset-q-modal { background: var(--zw-card) !important; color: var(--zw-text); }
.preset-q-cats, .preset-q-modal-footer { background: var(--zw-card) !important; border-color: var(--zw-split) !important; color: var(--zw-muted); }
.preset-q-cat-chip { background: var(--zw-tag-bg) !important; color: var(--zw-text) !important; border-color: var(--zw-input-line) !important; }
.preset-q-cat-chip.active { background: var(--zw-primary) !important; border-color: var(--zw-primary) !important; color: var(--zw-on-primary) !important; }
.preset-q-item { background: var(--zw-center) !important; border-color: var(--zw-split) !important; }
.preset-q-item:hover { background: var(--zw-sel-bg) !important; }
.preset-q-item-title { color: var(--zw-text) !important; }
.preset-q-item-preview { color: var(--zw-accent) !important; }
.preset-q-modal-close { color: var(--zw-accent) !important; }
/* 聊天区系统提示、视觉隐藏文字（给读屏读，如改动红点里的「（设置有改动）」） */
.zw-ai-sys-msg { text-align: center; color: var(--zw-muted); font-size: 12px; margin: 8px 0; }
.zw-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .zw-ai-body, .zw-ai-arrow, .zw-ai-avatar { transition: none; }
}