/* meihua/assets/meihua-ai.css —— 梅花 AI 解卦折叠卡片（右栏顶部 #mh-ai-slot）与聊天组件的宣纸墨色覆盖；
   由 tarot/assets/tarot-ai.css（源自 daliuren.css 第 373–530 行）改前缀而来（tr→mh），颜色全走 meihua.css 的 --mh-* 变量（两套主题都有）。
   与六壬、塔罗不同：梅花页右栏不是 sticky 竖排 flex，AI 卡片展开时不收起别的卡片，聊天消息区按视口高度给一个固定区间 */
.mh-ai { border-left: 4px solid var(--mh-ai-bar); padding: 0; overflow: hidden; }
.mh-ai-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: none; color: var(--mh-text);
              font-family: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 0 var(--mh-split); } /* 折叠时下沿一道浅阴影，像一张可以掀开的笺 */
.mh-ai-head[aria-expanded="true"] { box-shadow: none; border-bottom: 1px solid var(--mh-split); }
.mh-ai-head:hover { background: var(--mh-ai-head-hover); }
.mh-ai-head:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: -2px; }
.mh-ai-mark { flex: none; color: var(--mh-ai-bar); font-size: 16px; }
.mh-ai-titles { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.mh-ai-title { flex: none; font-size: 16px; font-weight: 700; }
.mh-ai-sub { min-width: 0; font-size: 12px; color: var(--mh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 状态胶囊：文字 + 颜色双提示；idle、login、down 共用灰 */
.mh-ai-status { flex: none; font-size: 12px; line-height: 1.6; padding: 1px 8px; border-radius: 10px; white-space: nowrap; background: var(--mh-ai-st-gray-bg); color: var(--mh-ai-st-gray-fg); }
#mh-ai[data-state="ready"] .mh-ai-status { background: var(--mh-ai-st-ready-bg); color: var(--mh-ai-st-ready-fg); }
#mh-ai[data-state="chat"] .mh-ai-status { background: var(--mh-ai-st-chat-bg); color: var(--mh-ai-st-chat-fg); }
#mh-ai[data-state="stale"] .mh-ai-status { background: var(--mh-ai-st-stale-bg); color: var(--mh-ai-st-stale-fg); }
.mh-ai-arrow { flex: none; font-size: 11px; color: var(--mh-faint); transition: transform .22s; }
.mh-ai-head[aria-expanded="true"] .mh-ai-arrow { transform: rotate(180deg); }
/* 折叠动画：JS 展开时先去掉 hidden、下一帧加 .mh-ai-shown；收起时先去掉 .mh-ai-shown、过渡结束再设 hidden */
.mh-ai-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.mh-ai-body.mh-ai-shown { grid-template-rows: 1fr; }
.mh-ai-body[hidden] { display: none; }
.mh-ai-inner { overflow: hidden; min-height: 0; padding: 0 14px 14px; }
.mh-ai-note { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--mh-sub); }
.mh-ai-note .mh-btn { display: inline-block; margin-left: 6px; padding: 5px 16px; text-decoration: none; }
/* tab：同起卦方式 tab（选中朱砂下划线） */
.mh-ai-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--mh-split); margin-top: 6px; }
.mh-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(--mh-muted); cursor: pointer; font-family: inherit; }
.mh-ai-tab:hover:not(:disabled) { color: var(--mh-text); }
.mh-ai-tab[aria-selected="true"] { color: var(--mh-accent); border-bottom-color: var(--mh-accent); }
.mh-ai-tab:disabled { cursor: not-allowed; opacity: .6; }
.mh-ai-tab:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 1px; }
.mh-ai-dot { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--mh-primary); vertical-align: 2px; }
.mh-ai-dot[hidden] { display: none; }
.mh-ai-panel { padding-top: 10px; font-size: 14px; }
.mh-ai-panel[hidden] { display: none; }
/* 设置表单 */
.mh-ai-label { display: block; margin: 8px 0 4px; font-size: 13px; color: var(--mh-sub); }
.mh-ai-label:first-child { margin-top: 0; }
.mh-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(--mh-input-bg); color: var(--mh-text); border: 1px solid var(--mh-input-line); border-radius: 6px; }
.mh-ai-panel select { padding: 6px 8px; font-size: 14px; font-family: inherit; background: var(--mh-input-bg); color: var(--mh-text); border: 1px solid var(--mh-input-line); border-radius: 4px; max-width: 100%; }
.mh-ai-panel select:disabled { opacity: .55; cursor: not-allowed; border-style: dashed; } /* 风格下拉在对话、教学模式或选了大师时禁用：靠透明度 + 虚线边看出 */
.mh-ai-question:focus-visible, .mh-ai-panel select:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 1px; }
#mh-ai-teach-wrap[hidden] { display: none; }
.mh-ai-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.mh-ai-pill { position: relative; display: inline-flex; cursor: pointer; }
.mh-ai-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mh-ai-pill span { padding: 4px 14px; border-radius: 14px; font-size: 13px; background: var(--mh-tag-bg); color: var(--mh-text); outline: 1px solid var(--mh-input-line); outline-offset: -1px; }
.mh-ai-pill:hover span { outline-color: var(--mh-accent); }
.mh-ai-pill input:checked + span { background: var(--mh-primary); color: var(--mh-on-primary); outline-color: var(--mh-primary); }
.mh-ai-pill input:disabled + span { opacity: .55; cursor: not-allowed; }
.mh-ai-pill input:focus-visible + span { box-shadow: 0 0 0 2px var(--mh-card), 0 0 0 4px var(--mh-focus); }
/* 外应（T9）：问题框下的折叠区，浅底卡片（tag-bg）；胶囊未选白底墨字，已选朱砂实底并显示「✓」（颜色之外另有对勾标记）；
   选满 4 个后其余禁用（透明度 + 虚线边）；颜色全走 --mh-*，两套主题由 meihua.css 的变量切换，contrast_check.mjs 已补检 */
.mh-ai-wy { margin-top: 10px; border-radius: 8px; background: var(--mh-tag-bg); outline: 1px solid var(--mh-split); outline-offset: -1px; }
.mh-ai-wy-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; background: none; color: var(--mh-text);
                   font-size: 14px; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.mh-ai-wy-toggle:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: -2px; }
.mh-ai-wy-sum { font-size: 12px; font-weight: normal; color: var(--mh-accent); }
.mh-ai-wy-arrow { margin-left: auto; font-size: 11px; color: var(--mh-muted); transition: transform .22s; }
.mh-ai-wy-toggle[aria-expanded="true"] .mh-ai-wy-arrow { transform: rotate(180deg); }
.mh-ai-wy-panel { padding: 0 12px 10px; }
.mh-ai-wy-panel[hidden] { display: none; }
.mh-ai-wy-tip { margin: 0 0 6px; font-size: 12px; line-height: 1.6; color: var(--mh-muted); }
.mh-ai-wy-group { display: flex; align-items: baseline; gap: 6px 8px; margin-top: 6px; }
.mh-ai-wy-gname { flex: none; width: 3em; font-size: 12px; font-weight: 600; color: var(--mh-sub); }
.mh-ai-wy-list { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.mh-ai-wy-pill { display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px; border: 0; border-radius: 12px; font-size: 12px; line-height: 1.7; font-family: inherit; cursor: pointer;
                 background: var(--mh-card); color: var(--mh-text); outline: 1px solid var(--mh-input-line); outline-offset: -1px; }
.mh-ai-wy-pill:hover:not(:disabled) { outline-color: var(--mh-accent); }
.mh-ai-wy-pill:focus-visible { box-shadow: 0 0 0 2px var(--mh-tag-bg), 0 0 0 4px var(--mh-focus); }
.mh-ai-wy-check { display: none; font-weight: 700; }
.mh-ai-wy-pill[aria-pressed="true"] { background: var(--mh-primary); color: var(--mh-on-primary); outline-color: var(--mh-primary); }
.mh-ai-wy-pill[aria-pressed="true"] .mh-ai-wy-check { display: inline; }
.mh-ai-wy-pill:disabled { opacity: .55; cursor: not-allowed; outline-style: dashed; }
.mh-ai-wy-limit { margin: 6px 0 0; font-size: 12px; color: var(--mh-danger); }
.mh-ai-wy-limit:empty { display: none; }
.mh-ai-wy-note { display: block; width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 14px; font-family: inherit;
                 background: var(--mh-input-bg); color: var(--mh-text); border: 1px solid var(--mh-input-line); border-radius: 4px; }
.mh-ai-wy-note:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 1px; }
.mh-ai-wy-left { display: block; margin-top: 2px; font-size: 12px; color: var(--mh-muted); text-align: right; }
@media (prefers-reduced-motion: reduce) { .mh-ai-wy-arrow { transition: none; } }
.mh-ai-mbox { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--mh-tag-bg); outline: 1px solid var(--mh-split); outline-offset: -1px; }
.mh-ai-mbox[hidden] { display: none; }
/* 大师触发行：头像 + 文字的按钮占满，「一键推荐」在右（不在按钮里嵌按钮） */
.mh-ai-master-head { display: flex; align-items: center; gap: 10px; }
.mh-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(--mh-text); font-size: 14px; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; }
.mh-ai-master-toggle:focus-visible, .mh-ai-recommend:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 1px; }
.mh-ai-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid var(--mh-split); box-sizing: border-box; opacity: .5; filter: grayscale(70%); transition: opacity .3s, filter .3s, border-color .3s; }
.mh-ai-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mh-ai-avatar.mh-ai-avatar-half { opacity: .9; filter: grayscale(20%); }
.mh-ai-avatar.mh-ai-avatar-on { opacity: 1; filter: none; border-color: var(--mh-accent); box-shadow: 0 0 0 3px var(--mh-sel-bg); }
.mh-ai-master-text { min-width: 0; }
.mh-ai-hint { font-size: 12px; font-weight: normal; color: var(--mh-muted); }
.mh-ai-hint.mh-ai-cancel { color: var(--mh-danger); }
.mh-ai-recommend { flex: none; padding: 3px 10px; font-size: 12px; line-height: 1.6; border-radius: 12px; border: 1px solid var(--mh-accent); background: var(--mh-card); color: var(--mh-accent); font-family: inherit; cursor: pointer; }
.mh-ai-recommend:hover { background: var(--mh-sel-bg); }
.mh-ai-recommend[hidden] { display: none; }
.mh-ai-master-panel { padding: 6px 0 2px; }
.mh-ai-master-panel[hidden], #mh-ai-category[hidden] { display: none; }
.mh-ai-master-panel select { display: block; width: 100%; margin-bottom: 6px; }
.mh-ai-methods { display: flex; flex-wrap: wrap; gap: 6px; }
.mh-ai-methods:empty { display: none; }
/* 回复风格、语言、应期：大师卡片外下方一行三列；内容宽 <480px 上下排（容器查询，按实际宽度） */
.mh-ai-opts { container-type: inline-size; margin-top: 10px; }
.mh-ai-opts-in { display: grid; grid-template-columns: 1.2fr 1fr 1.1fr; gap: 0 12px; }
@container (max-width: 479px) { .mh-ai-opts-in { grid-template-columns: 1fr; } }
.mh-ai-opt { min-width: 0; }
.mh-ai-opt select { width: 100%; }
.mh-ai-error { margin: 8px 0 0; color: var(--mh-danger); font-size: 14px; }
.mh-ai-error:empty { display: none; }
.mh-ai-start { display: block; width: 100%; margin-top: 12px; padding: 9px 16px; }
/* 聊天面板：改动提示条与空状态 */
.mh-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(--mh-warn-fg); background: var(--mh-warn-bg); border: 1px solid var(--mh-warn-line); border-radius: 6px; }
.mh-ai-stale[hidden], .mh-ai-note[hidden], #chatPanel[hidden] { display: none; }
#mh-ai-chat-empty { margin-top: 2px; }
/* 消息区：右栏不是 sticky 竖排（与六壬、塔罗不同），按视口高度取 260–560px，长对话在消息区里滚动 */
#chatPanel .chat-messages-container { min-height: clamp(260px, calc(100vh - 360px), 420px); max-height: clamp(320px, 70vh, 560px); }

/* 平台聊天组件本身写死蓝灰浅色：白天、暗黑两套都按 #chatPanel 作用域 !important 覆盖成宣纸墨色（照 tarot-ai.css / daliuren.css，--tr- 换 --mh-）；
   ai_panel.php 传给组件的 theme_color 只作组件内联样式的兜底，实际颜色以这里的变量为准 */
#chatPanel { --zhuti_clor: var(--mh-primary); --zhuti_clor_hover: var(--mh-primary-hover); }
#chatPanel .ai-chat-panel-wrapper { background: var(--mh-card) !important; outline: 1px solid var(--mh-input-line); outline-offset: -1px; }
#chatPanel .ai-chat-header { background: var(--mh-primary) !important; }
#chatPanel .chat-messages-container { background: var(--mh-bg) !important; }
#chatPanel .message-bubble.ai .message-content { background: var(--mh-card) !important; color: var(--mh-text) !important; box-shadow: inset 0 0 0 1px var(--mh-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(--mh-accent) !important; }
#chatPanel .message-bubble.ai .message-content a { color: var(--mh-accent) !important; }
#chatPanel .message-bubble.user .message-content { background: var(--mh-ububble) !important; color: var(--mh-on-ububble) !important; box-shadow: inset 0 0 0 1px var(--mh-input-line) !important; }
#chatPanel .ai-msg-actions { border-top-color: var(--mh-split) !important; }
#chatPanel .ai-action-btn { color: var(--mh-sub) !important; border-color: var(--mh-input-line) !important; background: transparent !important; }
#chatPanel .ai-action-btn:hover { background: var(--mh-sel-bg) !important; }
#chatPanel .rating-popup { background: var(--mh-card) !important; border-color: var(--mh-input-line) !important; }
#chatPanel .rate-opt-btn { color: var(--mh-text) !important; border-color: var(--mh-input-line) !important; }
#chatPanel .chat-footer { background: var(--mh-card) !important; border-top-color: var(--mh-split) !important; }
#chatPanel .chat-input, #chatPanel #chat-input { background: var(--mh-input-bg) !important; color: var(--mh-text) !important; border-color: var(--mh-input-line) !important; }
#chatPanel #chat-input.mh-ai-locked { background: var(--mh-locked) !important; color: var(--mh-muted) !important; }
#chatPanel #chat-send-btn:disabled { background: var(--mh-disabled) !important; }
#chatPanel .ai-chat-disclaimer { background: var(--mh-card) !important; color: var(--mh-muted) !important; }
#chatPanel .loading-timer-text, #chatPanel .message-content div[style*="color:#888"] { color: var(--mh-muted) !important; }
#chatPanel .user-points-badge { background: var(--mh-card) !important; color: var(--mh-text) !important; }
#chatPanel .message-content > button:not([class]) { background: var(--mh-card) !important; color: var(--mh-danger) !important; border-color: var(--mh-danger) !important; }
/* 提问模板按钮（组件挪进问题框，在 #chatPanel 外）与模板弹窗（挂在 body 上） */
.preset-q-trigger-btn { background: var(--mh-primary) !important; color: var(--mh-on-primary) !important; opacity: 1 !important; }
.preset-q-trigger-btn:hover { background: var(--mh-primary-hover) !important; }
.preset-q-modal { background: var(--mh-card) !important; color: var(--mh-text); }
.preset-q-cats, .preset-q-modal-footer { background: var(--mh-card) !important; border-color: var(--mh-split) !important; color: var(--mh-muted); }
.preset-q-cat-chip { background: var(--mh-tag-bg) !important; color: var(--mh-text) !important; border-color: var(--mh-input-line) !important; }
.preset-q-cat-chip.active { background: var(--mh-primary) !important; border-color: var(--mh-primary) !important; color: var(--mh-on-primary) !important; }
.preset-q-item { background: var(--mh-center) !important; border-color: var(--mh-split) !important; }
.preset-q-item:hover { background: var(--mh-sel-bg) !important; }
.preset-q-item-title { color: var(--mh-text) !important; }
.preset-q-item-preview { color: var(--mh-accent) !important; }
.preset-q-modal-close { color: var(--mh-accent) !important; }
@media (prefers-reduced-motion: reduce) {
  .mh-ai-body, .mh-ai-arrow { transition: none; }
}
/* 聊天区系统提示（「数据已就绪」等，不带按钮） */
.mh-sys-msg { text-align: center; color: var(--mh-muted); font-size: 12px; margin: 8px 0; }