/* tarot/assets/tarot-ai.css —— 塔罗 AI 解读折叠卡片（右栏顶部）与聊天组件的宣纸墨色覆盖；由 daliuren.css 第 373–530 行改前缀而来（lr→tr），随主题变量 --tr-* */
/* ===== AI 解读折叠卡片（右栏顶部，默认折叠、不分屏宽、不记本机；行为在 tarot-ai.js） =====
   新变量：--tr-ai-bar 左竖条、--tr-ai-head-hover 标题栏悬停底、--tr-ai-st-<态>-bg / -fg 状态胶囊（文字 + 颜色双提示；idle、login、down 共用灰）。
   胶囊对比度（WCAG 估算，Task 5 正式检查）：白天 灰 7.86、绿 6.52、朱砂 6.06、琥珀 7.08；暗黑 灰 7.77、绿 7.78、朱砂 6.37、琥珀 8.31 */
:root {
  --tr-ai-bar: #b3361f; --tr-ai-head-hover: #f4ede1;
  --tr-ai-st-gray-bg: #ebe5d9; --tr-ai-st-gray-fg: #4a4239;
  --tr-ai-st-ready-bg: #dff0e5; --tr-ai-st-ready-fg: #1a5e40;
  --tr-ai-st-chat-bg: #b3361f; --tr-ai-st-chat-fg: #ffffff;
  --tr-ai-st-stale-bg: #fbe8c4; --tr-ai-st-stale-fg: #7c3a06;
}
[data-theme="dark"] {
  --tr-ai-bar: #e0a34a; --tr-ai-head-hover: #2a251f;
  --tr-ai-st-gray-bg: #3a332a; --tr-ai-st-gray-fg: #d6cbb9;
  --tr-ai-st-ready-bg: #1d3a2c; --tr-ai-st-ready-fg: #7ee0b0;
  --tr-ai-st-chat-bg: #a83a24; --tr-ai-st-chat-fg: #ffffff;
  --tr-ai-st-stale-bg: #45351a; --tr-ai-st-stale-fg: #f5d58a;
}
.tr-ai { border-left: 4px solid var(--tr-ai-bar); padding: 0; overflow: hidden; }
.tr-ai-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: none; color: var(--tr-text);
              font-family: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 0 var(--tr-split); } /* 折叠时下沿一道浅阴影，像一张可以掀开的笺 */
.tr-ai-head[aria-expanded="true"] { box-shadow: none; border-bottom: 1px solid var(--tr-split); }
.tr-ai-head:hover { background: var(--tr-ai-head-hover); }
.tr-ai-head:focus-visible { outline: 2px solid var(--tr-focus); outline-offset: -2px; }
.tr-ai-mark { flex: none; color: var(--tr-ai-bar); font-size: 16px; }
.tr-ai-titles { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.tr-ai-title { flex: none; font-size: 16px; font-weight: 700; }
.tr-ai-sub { min-width: 0; font-size: 12px; color: var(--tr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-ai-status { flex: none; font-size: 12px; line-height: 1.6; padding: 1px 8px; border-radius: 10px; white-space: nowrap; background: var(--tr-ai-st-gray-bg); color: var(--tr-ai-st-gray-fg); }
#tr-ai[data-state="ready"] .tr-ai-status { background: var(--tr-ai-st-ready-bg); color: var(--tr-ai-st-ready-fg); }
#tr-ai[data-state="chat"] .tr-ai-status { background: var(--tr-ai-st-chat-bg); color: var(--tr-ai-st-chat-fg); }
#tr-ai[data-state="stale"] .tr-ai-status { background: var(--tr-ai-st-stale-bg); color: var(--tr-ai-st-stale-fg); }
.tr-ai-arrow { flex: none; font-size: 11px; color: var(--tr-faint); transition: transform .22s; }
.tr-ai-head[aria-expanded="true"] .tr-ai-arrow { transform: rotate(180deg); }
/* 折叠动画：JS 展开时先去掉 hidden、下一帧加 .tr-ai-shown；收起时先去掉 .tr-ai-shown、过渡结束再设 hidden */
.tr-ai-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.tr-ai-body.tr-ai-shown { grid-template-rows: 1fr; }
.tr-ai-body[hidden] { display: none; }
.tr-ai-inner { overflow: hidden; min-height: 0; padding: 0 14px 14px; }
.tr-ai-note { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--tr-sub); }
.tr-ai-note .tr-btn { display: inline-block; margin-left: 6px; padding: 5px 16px; text-decoration: none; }
/* tab：同 .tr-tab（选中朱砂下划线） */
.tr-ai-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--tr-split); margin-top: 6px; }
.tr-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(--tr-muted); cursor: pointer; font-family: inherit; }
.tr-ai-tab:hover:not(:disabled) { color: var(--tr-text); }
.tr-ai-tab[aria-selected="true"] { color: var(--tr-accent); border-bottom-color: var(--tr-accent); }
.tr-ai-tab:disabled { cursor: not-allowed; opacity: .6; }
.tr-ai-tab:focus-visible { outline: 2px solid var(--tr-focus); outline-offset: 1px; }
.tr-ai-dot { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--tr-primary); vertical-align: 2px; }
.tr-ai-dot[hidden] { display: none; }
.tr-ai-panel { padding-top: 10px; font-size: 14px; }
.tr-ai-panel[hidden] { display: none; }
/* 设置表单 */
.tr-ai-label { display: block; margin: 8px 0 4px; font-size: 13px; color: var(--tr-sub); }
.tr-ai-label:first-child { margin-top: 0; }
.tr-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(--tr-input-bg); color: var(--tr-text); border: 1px solid var(--tr-input-line); border-radius: 6px; }
.tr-ai-panel select { padding: 6px 8px; font-size: 14px; font-family: inherit; background: var(--tr-input-bg); color: var(--tr-text); border: 1px solid var(--tr-input-line); border-radius: 4px; max-width: 100%; }
.tr-ai-panel select:disabled { opacity: .55; cursor: not-allowed; border-style: dashed; } /* 风格下拉在对话、教学模式或选了大师时禁用：两套主题都靠透明度 + 虚线边看出（同 .tr-ai-tab:disabled） */
.tr-ai-question:focus-visible, .tr-ai-panel select:focus-visible { outline: 2px solid var(--tr-focus); outline-offset: 1px; }
#tr-ai-teach-wrap[hidden] { display: none; }
.tr-ai-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.tr-ai-pill { position: relative; display: inline-flex; cursor: pointer; }
.tr-ai-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tr-ai-pill span { padding: 4px 14px; border-radius: 14px; font-size: 13px; background: var(--tr-tag-bg); color: var(--tr-text); outline: 1px solid var(--tr-input-line); outline-offset: -1px; }
.tr-ai-pill:hover span { outline-color: var(--tr-accent); }
.tr-ai-pill input:checked + span { background: var(--tr-primary); color: var(--tr-on-primary); outline-color: var(--tr-primary); }
.tr-ai-pill input:focus-visible + span { box-shadow: 0 0 0 2px var(--tr-card), 0 0 0 4px var(--tr-focus); }
.tr-ai-mbox { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--tr-tag-bg); outline: 1px solid var(--tr-split); outline-offset: -1px; }
/* 大师触发行（2026-10-11 照奇门 .qm-ai-master-trigger）：头像 + 文字的按钮占满，「一键推荐」在右（同八字页 .bz-ai-master-head） */
.tr-ai-master-head { display: flex; align-items: center; gap: 10px; }
.tr-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(--tr-text); font-size: 14px; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; }
.tr-ai-master-toggle:focus-visible, .tr-ai-recommend:focus-visible { outline: 2px solid var(--tr-focus); outline-offset: 1px; }
.tr-ai-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid var(--tr-split); box-sizing: border-box; opacity: .5; filter: grayscale(70%); transition: opacity .3s, filter .3s, border-color .3s; }
.tr-ai-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tr-ai-avatar.tr-ai-avatar-half { opacity: .9; filter: grayscale(20%); }
.tr-ai-avatar.tr-ai-avatar-on { opacity: 1; filter: none; border-color: var(--tr-accent); box-shadow: 0 0 0 3px var(--tr-sel-bg); }
.tr-ai-master-text { min-width: 0; }
.tr-ai-hint { font-size: 12px; font-weight: normal; color: var(--tr-muted); }
.tr-ai-hint.tr-ai-cancel { color: var(--tr-danger); }
.tr-ai-recommend { flex: none; padding: 3px 10px; font-size: 12px; line-height: 1.6; border-radius: 12px; border: 1px solid var(--tr-accent); background: var(--tr-card); color: var(--tr-accent); font-family: inherit; cursor: pointer; }
.tr-ai-recommend:hover { background: var(--tr-sel-bg); }
.tr-ai-recommend[hidden] { display: none; }
.tr-ai-master-panel { padding: 6px 0 2px; }
.tr-ai-master-panel[hidden], #tr-ai-category[hidden] { display: none; }
/* 回复风格、语言、应期（2026-10-16 移到大师卡片外下方）：一行三列；内容宽 <480px 上下排（容器查询，按实际宽度） */
.tr-ai-opts { container-type: inline-size; margin-top: 10px; }
.tr-ai-opts-in { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 0 12px; }
@container (max-width: 479px) { /* .tr-ai-opts-in { grid-template-columns: 1fr; } */ }
.tr-ai-opt { min-width: 0; }
.tr-ai-opt select { width: 100%; }
.tr-ai-master-panel select { display: block; width: 100%; margin-bottom: 6px; }
.tr-ai-methods { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-ai-methods:empty { display: none; }
.tr-ai-error { margin: 8px 0 0; color: var(--tr-danger); font-size: 14px; }
.tr-ai-error:empty { display: none; }
.tr-ai-start { display: block; width: 100%; margin-top: 12px; padding: 9px 16px; }
/* 聊天面板：改动提示条与空状态 */
.tr-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(--tr-warn-fg); background: var(--tr-warn-bg); border: 1px solid var(--tr-warn-line); border-radius: 6px; }
.tr-ai-stale[hidden], .tr-ai-note[hidden], #chatPanel[hidden] { display: none; }
#tr-ai-chat-empty { margin-top: 2px; }
/* 电脑端：右栏 sticky 竖排 flex（A 期已有）；AI 卡片展开时撑满剩余高度，消息区最小 360px */
@media (min-width: 1010px) {
  .tr-right .tr-ai:not(.tr-ai-open) { flex: none; }
  .tr-right .tr-ai.tr-ai-open { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .tr-ai.tr-ai-open .tr-ai-body { flex: 1 1 auto; min-height: 0; }
  .tr-ai.tr-ai-open .tr-ai-inner { display: flex; flex-direction: column; }
  .tr-ai.tr-ai-open #tr-ai-p-set { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .tr-ai.tr-ai-open #tr-ai-p-chat:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .tr-ai.tr-ai-open #chatPanel:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .tr-ai.tr-ai-open #chatPanel .ai-chat-panel-wrapper { flex: 1 1 auto; min-height: 0; }
  /* 消息区最小 360px；矮屏按视口高度降低下限（不低于 160px），免得底部输入栏被卡片 overflow:hidden 裁掉。
     460px ≈ 消息区以外的固定高度（AI 标题栏、tab、改动提示条、组件标题与输入栏、课体毕法 tab 条、间距），Task 4 用真组件 HTML 在 1280×720 / 600 实测 */
  #chatPanel .chat-messages-container { flex: 1 1 auto; min-height: clamp(160px, calc(100vh - 460px), 360px); height: 0; max-height: none; }
}

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

/* 塔罗页：AI 卡片展开时，电脑端收起右栏的「牌阵总览 / 历史 / 说明」卡片，让聊天区撑满（收起时恢复） */
@media (min-width: 1010px) { .tr-right.tr-ai-on .tr-tabs-card { display: none; } }