/* ==========================================================================
   朝阳薪传 v7.11 · 主页（整幅成品场景图 + 图内热区）+ 经验库双栏
   --------------------------------------------------------------------------
   【v7.11 场景式主页】整页铺一幅带成品排版的水彩乡村场景图 home-scene.jpg
   （1920x1170，图宽高比 1.641）：「朝阳行动」主标题、副标题、「看看经验库」
   胶囊按钮、右侧黑板字都直接画在图里 —— 页面不再渲染 HTML 标题区，
   文字 100% 用图（无重影）；右上角只留「登记学号」徽章（v7.11 删除
   「进入 AI 求助」入口与「期待与你分享更多可能」小黑板，AI 问答功能
   已并入经验库问答窗口）。图最下方的浅色纸带是给固定底导航预留的。
   【cover 定位层（v7.11 核心机制）】图内可点元素必须与图对齐：背景从
   ::before 移进 .home-cover 定位层 —— 用 max() 公式精确复现 cover 裁剪
   矩形（宽 = max(容器宽, 容器高x1.641)，高 = max(容器高, 容器宽/1.641)），
   图在层内 100% 铺满，层内子元素按【图片百分比坐标】定位，任何视口
   比例下都钉在图上：
   - .home-lib-hotspot：盖在图内「看看经验库」按钮上的透明热区（进思维树）。
   - .home-wall-cat：v7.10 的歪头 GIF 逐帧洪泛抠底透明变体
     （cat-gif-tilt-a.webp，零残影），坐在图内书堆右侧的石台顶面
     （图坐标：台面线 y≈68%，可用台面 x 73%~88%），气泡在猫左上方。
   点击链路（v7.9 复原的 v6.4 原架构）：首次点猫 → 猫头顶飘出气泡
   （cat-hail）→ 再点进「和墙墙聊聊这节课」对话页；表单入口在对话页右上角。
   底部三栏导航（首页/经验库/我的）由 renderBottomNav 固定（style.css）。
   移动端（≤880px）：上半屏 hero（背景 auto 100% 高度撑满、取景靠左）显示
   图左半（标题+按钮可见，热区放宽命中），下半屏米白区放猫（v7.8 上下结构）。
   经验库 v7.2：左 58% 思维树（功能不动）/ 右 42% AI 提问窗口 —— 橙色渐变
   标题条（右端渐隐）+ 三张椭圆提示卡分流 A/B：灵感=B 不检索；
   课前经验包·具体问题=A 检索。提示卡只有「词 + 极小说明」，不带图标。
   · 混色红线（v6.7/v6.8 深坑）：主页猫是透明底 WebP（mix-blend-mode:
     normal），无混色绝缘问题；经验库等处的近白底 GIF 仍是 darken 混色，
     其祖先链依旧不能带 transform / filter / animation / isolation。
   ========================================================================== */

/* ---------- 0. 一级布局覆盖：主页取消 720px 居中壳 ----------
   style.css 的 #app { max-width: 720px; padding: 0 24px; margin: 0 auto }
   是全站通用容器；主页场景必须铺满整个视口，这里只在 page-home 时解除。 */
body.page-home #app {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* 全站 body 的 padding-bottom:110px 是给固定底导航留的空；主页场景自己
   管间距，不清零会产生 110px 的可滚动空白（v7.8 探针实测） */
body.page-home { padding-bottom: 0; }

/* ---------- 0.5 cover 定位层：背景图 + 图内百分比坐标的交互元素 ----------
   公式复现 background-size:cover 的可见矩形：容器比例比图"更宽"时按高撑满
   左右裁、更"瘦"时按宽撑满上下裁。层内坐标 = 图片百分比，热区与猫永远
   钉在图的对应位置上（纯 CSS ::before 背景做不到这一点）。 */
.home-cover {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, calc(100vh * 1.641));
  height: max(100%, calc(100vw / 1.641));
  /* 底色 = 场景图天空色（图片未载入时不至于白屏）；层内 100% 铺满 */
  background: #E4ECF4 url(assets/home-scene.jpg) center center / 100% 100% no-repeat;
}
/* 透明热区：图内「看看经验库」胶囊按钮（实测图坐标 x 18.2%~35.9%、
   y 45.1%~52.2%），略放宽命中；hover 一圈暖橙柔光提示可点 */
.home-lib-hotspot {
  position: absolute;
  left: 17.9%;
  top: 44.8%;
  width: 18.3%;
  height: 7.8%;
  z-index: 4;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .18s ease, background .18s ease;
}
.home-lib-hotspot:hover,
.home-lib-hotspot:focus-visible {
  background: rgba(255, 252, 244, .28);
  box-shadow: 0 0 0 3px rgba(232, 146, 90, .4), 0 4px 14px rgba(138, 115, 98, .18);
  outline: none;
}

/* ---------- 1. 舞台容器（主页一级容器，非卡片） ---------- */
.home-stage {
  position: relative;
  min-height: 100vh;
  /* cover 定位层按视口比例会比视口宽/高出一圈（cover 本来就要裁掉），
     不裁剪会产生滚动条（v7.11 桌面 1440 探针实测） */
  overflow: hidden;
}
/* 待回访提示条：压在场景上层的左上角小条（不把 100vh 舞台顶出滚动） */
.home-stage .pending-strip {
  position: absolute;
  top: 16px;
  left: 26px;
  z-index: 25;
  max-width: 430px;
  margin: 0;
  padding: 12px 16px;
  background: rgba(253, 250, 242, .92);
}

/* ---------- 2. 右上角：只留「登记学号」徽章（v7.11 删 AI 入口与小黑板） ---------- */
.home-topbar {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.home-topbar .id-badge { position: static; z-index: auto; max-width: none; }
.home-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- 4. 图内石台上的 GIF 猫 CTA（书堆右侧） ---------- */
/* v7.11：猫随 .home-cover 定位层用【图片百分比坐标】落位 —— 新背景图里
   石台顶面线在 y≈68%，书堆占 x 61%~72%，书堆右侧 x 73%~88% 是空台面。
   猫容器宽取图宽 14%（≈书堆略宽，近大远小合适），aspect-ratio 1:1 补高，
   底边 = top + 高度(14% x 1.641 = 23%) ≈ 68% 正好压在台面线上。
   猫是透明底 WebP（mix-blend-mode: normal），无混色绝缘问题。 */
.home-wall-cat {
  position: absolute;
  z-index: 3;
  left: 71.8%;
  top: 47.8%;   /* 爪底落进台面（45.1% 时爪底悬空 ~26px，v7.11 截图实测） */
  width: 14%;
}
.home-wall-cat .gif-cat .gif { mix-blend-mode: normal; }
.home-logo {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-logo .gif-cat {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
}
/* 轻投影：把猫"压"进石台面（drop-shadow 只在 img 自身，非祖先） */
.home-logo img.gif { transition: transform .25s ease; filter: drop-shadow(0 10px 12px rgba(96, 72, 42, .16)); }
.home-logo:hover img.gif,
.home-logo:focus-visible img.gif { transform: scale(1.045); }
.home-logo:focus-visible { outline: 2px dashed rgba(232,146,90,.8); outline-offset: 6px; border-radius: 24px; }

/* ---------- 5. 朝朝自我介绍气泡（v7.13 → v7.45）：常驻显示，进入首页即飘出 ---------- */
.home-bubble {
  position: absolute;
  top: -52px;
  left: -138px;
  z-index: 5;
  font-family: var(--font-hand);
  font-size: 16.5px;
  line-height: 1.55;
  letter-spacing: .5px;
  text-align: left;
  color: var(--ink);
  background: var(--bg-card);
  border: 2px solid rgba(232, 146, 90, .75);
  border-radius: 18px 18px 18px 6px;
  padding: 12px 18px 13px;
  box-shadow: 0 6px 16px rgba(74, 63, 53, .10);
  cursor: pointer;
  white-space: normal;
  max-width: 300px;
  animation: homeBubbleFloat 3.2s ease-in-out infinite;
  /* v7.45：气泡默认常驻飘出，不再点猫才出现 */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease;
}
/* hail-open：弹出自我的介绍气泡（v7.13 链路：点猫 → 气泡 → 点气泡进对话页） */
.home-logo-wrap.hail-open .home-bubble {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.home-bubble::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 58px;
  height: 20px;
  margin-left: -29px;
  background: rgba(232, 146, 90, .30);
  border-left: 1px dashed rgba(232, 146, 90, .45);
  border-right: 1px dashed rgba(232, 146, 90, .45);
  transform: rotate(-4deg);
  border-radius: 2px;
}
/* 气泡尾巴：指向右下方的猫（气泡在猫左上，尾巴翻到右下角） */
.home-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  right: 30px;
  left: auto;
  width: 13px;
  height: 13px;
  background: var(--bg-card);
  border-right: 2px solid rgba(232, 146, 90, .75);
  border-bottom: 2px solid rgba(232, 146, 90, .75);
  transform: rotate(45deg);
}
@keyframes homeBubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* ---------- 6. 经验库上下结构（v7.16）：上半区经验树主区 / 下半区 AI 模块 ---------- */
.lib-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 顶部窄工具行：返回 + 小标题计数 + 树/列表切换（替代原 brand-hero 大框） */
.lib-top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.lib-top-bar .lib-ai-back { margin: 0; flex: 0 0 auto; }
.lib-top-title {
  font-family: var(--font-hand);
  font-size: 21px;
  letter-spacing: 2px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-top-title .lib-top-count {
  font-style: normal;
  font-family: var(--font-serif, inherit);
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--ink-faint, #B8A692);
  margin-left: 8px;
}
.lib-top-bar .lib-switch { margin-left: auto; flex: 0 0 auto; }
/* 上半区：经验树（横向滚动 / 搜索框 / 展开收起等全在 .tree-card 内，原样保留） */
.lib-tree-zone { min-width: 0; }
/* 暖橙细分隔线：两端渐隐 */
.lib-divider {
  height: 2px;
  margin: 4px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(232, 146, 90, 0) 0%,
    rgba(232, 146, 90, .55) 16%,
    rgba(232, 146, 90, .55) 84%,
    rgba(232, 146, 90, 0) 100%);
}
/* 下半区：经验库 AI 模块——浅米白圆角区域。
   注意必须显式铺真实底色（角落猫 GIF 的混合需要真实背景，v6.7 深坑），
   不能用半透明。 */
.lib-ai-zone {
  background: var(--bg);
  border: 1.5px solid rgba(190, 160, 122, .28);
  border-radius: 20px;
  padding: 14px 18px 16px;
}
/* 下半区横向铺开后：三张提示卡改横排一行（窄屏回落为竖排，见 880px 媒体查询），
   输入框压矮一档，让下半区保持「一条」的体量 */
.lib-ai-zone .lib-ai-chips { flex-direction: row; margin-bottom: 10px; }
.lib-ai-zone .ask-chip { flex: 1 1 0; min-width: 0; padding: 10px 14px 8px; }
.lib-ai-zone .ask-chip .chip-word { font-size: 19px; }
.lib-ai-zone .lib-ai-card textarea { min-height: 62px; }
/* AI 窗口：沿用 .ask-input-card 载体（v65 自动贴胶带/手账皮肤 + 角落猫） */
.lib-ai-card { position: relative; padding: 18px 16px 14px; }
.lib-ai-card textarea { width: 100%; min-height: 86px; resize: vertical; }

/* 橙色标题条：右端渐隐回纸色——角落猫正好落在渐隐后的浅色区，
   近白底 GIF 叠上去也不会显出一块白（预览图的「趴在卡片上沿打招呼」） */
.lib-ai-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: -18px -16px 14px;
  padding: 9px 20px 9px 18px;
  border-radius: 19px 19px 0 0;
  background: linear-gradient(90deg, #E8925A 0%, #EDA071 44%, rgba(255, 252, 246, 0) 94%);
  color: #FFFDF8;
  font-family: var(--font-hand);
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1;
}
.lib-ai-head-tag { text-shadow: 0 1px 2px rgba(160, 92, 44, .22); }
.lib-ai-head-deco { display: inline-flex; opacity: .95; }

.lib-ai-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 2px 10px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--bg-card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.lib-ai-back:hover { color: var(--ink); border-color: rgba(232,146,90,.6); }

/* 三张椭圆提示卡：手账风椭圆胶囊，词大 + 说明极小浅色（按预览图：不带图标） */
.lib-ai-chips {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0 0 14px;
}
.ask-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 13px 22px 11px;
  background: var(--bg-card);
  border: 2px solid rgba(232, 146, 90, .62);
  /* 椭圆胶囊 */
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(138, 115, 98, .10);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ask-chip:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
  box-shadow: 0 6px 14px rgba(138, 115, 98, .16);
}
.ask-chip .chip-word {
  font-family: var(--font-hand);
  font-size: 23px;
  letter-spacing: 3px;
  color: var(--ink);
  line-height: 1.15;
}
.ask-chip .chip-note {
  font-size: 11.5px;
  color: var(--ink-faint, #B8A692);
  letter-spacing: .3px;
}
/* 窄容器时把胶囊收一点，保证「课前经验包」这种长词也放得下 */
@media (min-width: 601px) and (max-width: 1024px) {
  .ask-chip { padding: 11px 16px 9px; }
  .ask-chip .chip-word { font-size: 20px; }
  .ask-chip .chip-note { font-size: 10.5px; }
}

/* 角落猫：从右下角移到右上角（趴在标题条右端）。
   v7.36.5：改用透明底 open 变体（catSVG({gif:'open', alpha:true})），
   不再依赖 darken 融图 —— 本猫的容器带 z-index，混合早被绝缘，近白底会显成白方块。
   连带删掉原来那块「用奶白 radial-gradient 把近白底方形边过渡掉」的 ::before：
   它本身是 96% 不透明的奶白圆斑，在没有方形边要过渡之后只会变成新的白底。
   容器仍保持无 transform（历史深坑：祖先带 transform 会绝缘混合）。 */
.lib-ai-zone .lib-ai-corner {
  top: -14px;
  right: 4px;
  bottom: auto;
  transform: none;
}
.lib-ai-zone .lib-ai-corner .gif { rotate: -3deg; }

.lib-ai-submit {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 11px 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;
  background: var(--accent-deep, #C97038);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background .16s ease;
}
.lib-ai-submit:hover { background: var(--accent, #E8925A); }

/* ---------- 7. 移动端（≤880px）：上半屏 hero 取景图左半，下半屏米白放猫 ---------- */
@media (max-width: 880px) {
  /* hero：背景按高度撑满（auto 100% 保持比例）、取景靠左 —— 图左半的
     「朝阳行动」标题 +「看看经验库」按钮完整可见；hero 底部正好是图内
     预留的浅色纸带，与下方米白区自然衔接 */
  .home-cover {
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: 56vh;
    background-size: auto 100%;
    background-position: 0% 50%;
  }
  /* 裁剪窗口内按钮坐标随机型漂移：热区放宽覆盖（命中区 ≈ 按钮 ±1 圈） */
  .home-lib-hotspot { left: 29%; top: 42%; width: 47%; height: 14%; }

  .home-topbar { top: 10px; right: 12px; gap: 8px; }
  .home-stage .pending-strip { left: 12px; right: 12px; top: 10px; max-width: none; }

  /* 猫移出 hero（fixed 脱离 cover 盒，cover 在移动端已无 transform，
     fixed 以视口定位）：坐在下半屏米白区中央、底导航上方 */
  .home-wall-cat {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: 104px;   /* 104px 给固定底导航让位 */
    width: 200px;
    margin-left: -100px;
    z-index: 6;
  }
  .home-logo .gif-cat { width: 100% !important; }
  .home-bubble {
    top: -76px;
    left: 50%;
    margin-left: -118px;
    white-space: normal;
    max-width: min(236px, 60vw);
    font-size: 18px;
    padding: 10px 16px 11px;
    border-radius: 16px 16px 16px 5px;
  }

  /* v7.16 经验库上下结构：窄屏同构（树在上、AI 在下），AI 区提示卡竖排回落 */
  .lib-stack { gap: 12px; }
  .lib-ai-zone { padding: 12px 12px 14px; border-radius: 16px; }
  .lib-ai-zone .lib-ai-chips { flex-direction: column; }
  .lib-top-title { font-size: 18px; }
}

/* ---------- 8. 尊重系统「减弱动态效果」：呼吸 / 浮动 / 脉动全部停止 ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-bubble { animation: none; }
  .home-logo img.gif { transition: none; }
  .home-logo:hover img.gif { transform: none; }
}

/* ==========================================================================
   v7.13 「朝朝」AI 对话式复盘：横屏布局改造
   上方朝朝 GIF → 「参考回答方向」提示区（AI 动态 3 条）→ 对话记录 →
   底部统一输入栏（单输入框 + 右侧麦克风 +【说好了】）
   ========================================================================== */
.chat-page { max-width: 880px; }

/* ---- 参考回答方向提示区 ---- */
.chat-hints {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 8px 8px;
}
.hints-cap {
  font-family: "ZCOOL KuaiLe", KaiTi, serif;
  font-size: 12.5px;
  color: #8A5A2B;
  background: #F5EAD2;
  border: 1px solid #E8CFA4;
  border-radius: 999px;
  padding: 3px 10px 4px;
  white-space: nowrap;
}
.hint-chip {
  font-size: 12.5px;
  line-height: 1.4;
  color: #6E5A44;
  background: #FFF9EC;
  border: 1.5px solid #EBCFA0;
  border-radius: 999px;
  padding: 5px 13px 6px;
  box-shadow: 0 1px 4px rgba(201, 112, 56, .07);
}
.hints-loading { font-size: 12px; color: var(--ink-faint); font-style: italic; }

/* ---- 顶栏：结束并保存 ---- */
.chat-top .chat-end-link {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--secondary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.chat-top .chat-end-link:hover { color: var(--accent-deep); }

/* ---- 底部统一输入栏：单输入框 + 右侧麦克风 +【说好了】 ---- */
.chat-input-row {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0 2px 10px;
}
#chat-ta {
  flex: 1 1 0%;
  min-width: 0;
  resize: none;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg-card);
  border: 1.5px solid var(--ink-line);
  border-radius: 14px;
  padding: 10px 14px;
  outline: none;
}
#chat-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232, 146, 90, .14); }
.mic-side {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-soft);
  background: var(--bg-card);
  color: var(--accent-deep);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, color .18s ease;
}
.mic-side:hover { background: var(--accent-tint); }
.mic-side .mic-ico { width: 20px; height: 20px; }
.mic-side.recording {
  background: var(--accent);
  color: #FFFCF6;
  border-color: var(--accent-deep);
  animation: micSidePulse 1.2s ease-in-out infinite;
}
.mic-side.off { opacity: .45; cursor: not-allowed; }
@keyframes micSidePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 146, 90, .35); }
  50%      { box-shadow: 0 0 0 7px rgba(232, 146, 90, 0); }
}
.chat-send {
  flex: 0 0 auto;
  font-family: "ZCOOL KuaiLe", KaiTi, serif;
  font-size: 15.5px;
  letter-spacing: 1px;
  color: #FFFCF6;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  border: 1.5px solid var(--accent-deep);
  border-radius: 14px;
  padding: 10px 20px 11px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(201, 112, 56, .18);
  transition: opacity .18s ease, transform .18s ease;
}
.chat-send:hover:not(:disabled) { transform: translateY(-1px); }
.chat-send:disabled {
  background: #E4DACB;
  border-color: #D8CCB8;
  color: #A79B8A;
  cursor: not-allowed;
  box-shadow: none;
}
/* 麦克风提示条：录音中高亮；转写失败临时闪提示 */
.mic-hint { transition: color .2s ease; }
.mic-hint.live { color: var(--accent-deep); font-weight: 600; }
.mic-hint.flash { color: var(--danger, #B4552D); }

/* ---- 窄屏回落：竖排（输入栏保持同一结构） ---- */
@media (max-width: 880px) {
  .chat-page { max-width: 100%; }
  .chat-hints { justify-content: flex-start; }
  .hint-chip { font-size: 12px; padding: 4px 11px 5px; }
  .chat-input-row { gap: 6px; }
  .chat-send { padding: 9px 16px 10px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mic-side.recording { animation: none; }
}

/* v7.13 补：对话页解除 #app 720px 壳限制（横屏更宽），对话区不出横向滚动条 */
body.page-review_chat #app { max-width: 880px; }
.chat-log { overflow-x: hidden; }
#chat-ta { scrollbar-width: thin; }

/* ==========================================================================
   v7.14 对话页去卡片化：对话内容直接铺满页面（解除手账窗口皮肤后）
   上半区 = 左（朝朝 GIF logo）+ 右（结束并保存 / 参考回答方向分行提示）
           + 聊天对话流（填满剩余空间）
   下半区 = 底部全局悬浮固定输入栏（单行输入框 + 麦克风 +【说好了】）
   ========================================================================== */
/* 解除 #app 壳：对话内容占满全屏页面 */
body.page-review_chat #app { max-width: none; padding: 0; }
.chat-page {
  max-width: none;
  margin: 0;
  height: calc(100dvh - 62px);
  padding: 0 0 104px;   /* 底部给悬浮输入栏留位 */
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* ---- 上半区 ---- */
.chat-upper {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 22px 0;
}
.chat-head {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 26px;              /* v7.15 拉大分栏间距，提示框整体右移 */
  padding: 2px 2px 10px;
}
.chat-cat-side {
  flex: 0 0 auto;
  width: 208px;           /* v7.15 朝朝明显放大：列宽 150 → 208 */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 2px;
}
/* v7.15 朝朝 GIF 96 → 148（仅视觉放大，素材/形象/动效不变） */
.chat-cat-side .cat-svg {
  position: relative;
  width: 148px !important;
  height: 148px !important;
}
.chat-cat-side .stage-ground {
  width: 122px;           /* v7.15 地面阴影随猫放大 */
  height: 10px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(122, 139, 111, .18), rgba(122, 139, 111, 0) 72%);
}
.chat-side-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 6px;       /* v7.15 提示框再右移一点，与放大的朝朝保持间距 */
}
.chat-side-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-side-top .chat-title {
  font-family: "ZCOOL KuaiLe", KaiTi, serif;
  font-size: 17px;
  color: var(--ink);
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-side-top .chat-end-link {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--secondary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.chat-side-top .chat-end-link:hover { color: var(--accent-deep); }

/* ---- 右侧「参考回答方向」：分行文本（不再用横向标签卡片） ---- */
.chat-hints-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #FFF9EC;
  border: 1.5px solid #EBCFA0;
  border-radius: 14px;
  padding: 9px 14px 10px;
}
.chat-hints-box .hints-cap {
  display: inline-block;
  font-family: "ZCOOL KuaiLe", KaiTi, serif;
  font-size: 12.5px;
  color: #8A5A2B;
  background: #F5EAD2;
  border: 1px solid #E8CFA4;
  border-radius: 999px;
  padding: 2px 10px 3px;
  margin-bottom: 5px;
}
.hint-line {
  position: relative;
  padding-left: 15px;
  font-size: 13px;
  line-height: 1.8;
  color: #6E5A44;
}
.hint-line::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.hints-loading { font-size: 12px; color: var(--ink-faint); font-style: italic; }

/* ---- 下半区：底部全局悬浮固定输入栏 ---- */
.chat-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 56px;          /* 压在底部导航（首页/经验库/我的）之上 */
  z-index: 5;
  background: rgba(250, 246, 238, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1.5px solid var(--ink-line);
  padding: 6px 22px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-dock .mic-hint {
  font-size: 11.5px;
  color: var(--ink-faint);
  padding: 0 4px;
}
.chat-dock .chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
/* 单行输入框（打字 + 语音转文字合一） */
#chat-ta {
  height: 44px;
  border-radius: 999px;
  padding: 0 16px;
}
.chat-dock .chat-send { border-radius: 999px; height: 44px; padding: 0 22px; }

/* ---- v7.14 会话选择弹窗（断点续录） ---- */
.modal-layer .chat-session-pop {
  width: min(420px, 88vw);
  background: var(--bg-card);
  border: 2px solid var(--ink-line);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(74, 63, 53, .18);
  padding: 26px 26px 22px;
  text-align: center;
}
.chat-session-pop .csp-cat { display: flex; justify-content: center; margin-bottom: 4px; }
.chat-session-pop .csp-title {
  font-family: "ZCOOL KuaiLe", KaiTi, serif;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 6px;
}
.chat-session-pop .csp-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  line-height: 1.7;
}
.chat-session-pop .csp-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---- 窄屏回落：猫收小、提示字号降一档、输入栏收紧 ---- */
@media (max-width: 880px) {
  .chat-upper { padding: 8px 14px 0; }
  .chat-head { gap: 10px; padding-bottom: 8px; }
  .chat-cat-side { width: 136px; }
  .chat-cat-side .cat-svg { width: 104px !important; height: 104px !important; }
  .chat-cat-side .stage-ground { width: 86px; }
  .chat-side-panel { margin-left: 2px; }
  .chat-side-top .chat-title { font-size: 15px; }   /* 给标题留全宽，防省略号 */
  .chat-side-top { gap: 8px; }
  .chat-hints-box { padding: 7px 12px 8px; }
  .hint-line { font-size: 12.5px; line-height: 1.7; }
  .chat-dock { padding: 5px 12px 8px; }
  .chat-page { padding-bottom: 92px; }
}
/* ==========================================================================
   v7.17 · AI 经验库：三个胶囊 = 三个 Agent Tools
   1) 胶囊选中态 + 朝朝引导行（点击不再往输入框填字）
   2) 工具结果页：路由标签 + 分模块卡片 + 有序要点 + 可跳转经验树节点
   ========================================================================== */
/* ---- 1. 胶囊选中态：仍保持圆角胶囊外观，只加一圈暖橙实线与浅底 ---- */
.ask-chip.on {
  background: #FBF0DE;
  border-color: var(--orange);
  box-shadow: 0 3px 0 rgba(138, 115, 98, .14), 0 0 0 3px rgba(232, 146, 90, .14);
}
.ask-chip.on .chip-word { color: var(--accent-deep); }
.ask-chip.on::after {
  content: "已选";
  position: absolute;
  top: -9px;
  right: 12px;
  font-size: 10px;
  letter-spacing: .5px;
  color: #FFFDF8;
  background: var(--orange);
  border-radius: 999px;
  padding: 1px 7px 2px;
}
.ask-chip { position: relative; }

/* 朝朝引导行：选定工具后在这里告诉用户补什么信息（不填进输入框） */
.lib-ai-guide {
  margin: -2px 0 10px;
  padding: 8px 12px 9px 12px;
  background: #FDF4E6;
  border-left: 3px solid var(--orange);
  border-radius: 4px 12px 12px 4px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #6E5A44;
}
.lib-ai-guide[hidden] { display: none; }

/* ---- 2. 结果页：路由可视化标签 ---- */
.tool-route-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 10px;
  padding: 4px 12px 5px;
  font-size: 12.5px;
  color: #8A5A2B;
  background: #F6ECDA;
  border: 1px solid #E8CFA4;
  border-radius: 999px;
}
.tool-route-tag .trt-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.tool-route-tag.is-general { color: var(--ink-soft); background: var(--line-soft); border-color: var(--line); }
.tool-route-tag.is-general .trt-dot { background: var(--ink-faint); }
/* 追问页的路由标签居中 */
.ask-head .tool-route-tag { margin: 0 0 10px; }

/* ---- 3. 结果页：分模块卡片 + 有序要点 ---- */
.tool-blocks { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.tool-block {
  background: var(--bg-card);
  border: 1.5px solid var(--ink-line);
  border-radius: 16px;
  padding: 14px 16px 12px;
}
.tool-block h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15.5px;
  font-family: var(--font-hand);
  letter-spacing: .5px;
  color: var(--ink);
  font-weight: 400;
}
.tool-block h3 .tb-no {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #F5E3C8;
  color: #8A5A2B;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool-points {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tool-points li {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink);
}
.tool-points li::marker { color: var(--orange); font-weight: 700; }
.tool-block.nodes { background: #FFFCF4; }
.tb-hint { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 10px; }

/* 经验树节点条目（点击直达该条复盘） */
.tool-node {
  border: 1.5px dashed #E3CFAE;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.tool-node:hover { border-color: var(--orange); background: #FFF8EA; transform: translateY(-1px); }
.tool-node .line { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; margin-top: 6px; }
.tree-focus-cta { margin-top: 4px; }

/* 兜底 / 素材不足提示块 */
.tool-note {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13.5px;
  line-height: 1.75;
}
.tool-note .tn-title { font-weight: 700; margin-bottom: 4px; }
.tool-note p { margin: 0; }
.tool-note.general { background: var(--line-soft); border: 1.5px solid var(--line); color: var(--ink-soft); }
.tool-note.warn { background: var(--warning-tint); border: 1.5px solid var(--warning); color: var(--warning-deep); }

@media (max-width: 880px) {
  .tool-block { padding: 12px 13px 10px; border-radius: 14px; }
  .tool-points li { font-size: 14px; }
  .ask-chip.on::after { right: 8px; }
}

/* ==========================================================================
   v7.18 · 经验库 AI 求助「边界控制」的界面部分
   --------------------------------------------------------------------------
   只补边界状态的可视化，三套工具的回答框架与整体水彩暖米风不动：
     1) 【问 AI】置灰（空输入 / 请求在飞）+ 麦克风锁 + 【清空问题】小按钮
     2) 结果页：上半截钉住，AI 结果区独立滚动（长文不把输入/标签滚出屏幕）
     3) 检索 0 条的固定模板块
     4) 刷新后的「恢复会话 / 清空，重新提问」选择弹窗
   ========================================================================== */

/* ---- 1. 提交/语音的边界状态 ---- */
.ask-clear-btn {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 11px 6px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--secondary-deep, #6B7F63);
  background: #FBF6EA;
  border: 1px solid var(--ink-line, #E4D9C2);
  border-radius: 999px;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.ask-clear-btn:hover { color: var(--accent-deep, #C97038); border-color: var(--accent, #E8925A); background: #FFF9EC; }
.ask-clear-btn:disabled { opacity: .5; cursor: not-allowed; color: var(--ink-faint); border-color: var(--line, #EFE7D6); background: #F7F3E9; }

/* 空输入 / 请求在飞：置灰不可点（三处提交键：经验库 AI 窗口 / 求助页卡内 / 求助页底栏） */
.lib-ai-submit:disabled,
.ask-input-card .submit-ask:disabled,
.ask-footer .big-submit:disabled {
  background: var(--line, #EFE7D6);
  color: var(--ink-faint, #B3A793);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  letter-spacing: 4px;
}
.ask-footer .big-submit:disabled svg { transform: none; }
.mic-big:disabled,
.mic-big.is-locked {
  filter: grayscale(.45);
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- 2. 结果区（v7.26：不再有独立滚动容器 / 钉住头部） ----
   v7.18 的 .advice-scroll（max-height + overflow-y）已废除：
   AI 回答内容就是页面文档流本身，内容多长撑多长，整页统一滚动
   （经验树 → AI 回答 → 输入框），不做任何内滚小框。 */
.advice-top {
  padding-top: 2px;
  padding-bottom: 2px;
}
.advice-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.advice-actions { margin-top: 18px; }

/* ---- 2.1 v7.26 经验库内联回答区：纯文档流，无边框 / 无背景卡 ---- */
.lib-advice-zone {
  min-width: 0;
}
.lib-advice-zone .advice-page {
  padding: 0;
}
/* 库页顶部工具行已有「返回」；输入框就在回答正下方 →
   回答自身的返回行与底部双按钮不再重复出现（DOM 保留，交互兜底仍可用） */
.lib-advice-zone .advice-top-bar { display: none; }
.lib-advice-zone .advice-actions { display: none; }
.lib-advice-zone .small-foot { margin-top: 4px; }
/* v7.30：内联加载态（.lib-advice-loading）随等待页改回独立思考过程页而移除 */

/* ---- 3. 检索 0 条：固定模板（禁止编造） ---- */
.tool-zero {
  background: #FFFCF3;
  border: 1.5px dashed var(--jn-line, #E2D3B6);
  border-radius: 16px;
  padding: 18px 18px 16px;
  text-align: center;
}
.tool-zero .tz-title {
  font-family: var(--font-hand, "ZCOOL KuaiLe", KaiTi, serif);
  font-size: 17px;
  color: #8A5A2B;
  margin-bottom: 6px;
}
.tool-zero .tz-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft, #6E6152);
}

/* ---- 4. 刷新后的会话恢复弹窗（与复盘会话弹窗同一套观感） ---- */
.ask-restore-pop {
  width: min(420px, 88vw);
  background: var(--bg-card, #FFFDF8);
  border: 2px solid var(--ink-line, #E4D9C2);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(74, 63, 53, .18);
  padding: 24px 24px 20px;
  text-align: center;
}
.ask-restore-pop .arp-title {
  font-family: var(--font-hand, "ZCOOL KuaiLe", KaiTi, serif);
  font-size: 18.5px;
  color: var(--ink, #4A3F35);
  margin: 0 0 6px;
}
.ask-restore-pop .arp-sub {
  font-size: 13px;
  color: var(--ink-soft, #6E6152);
  margin: 0 0 12px;
  line-height: 1.7;
}
.ask-restore-pop .arp-q {
  font-size: 13.5px;
  color: var(--ink, #4A3F35);
  background: #FBF4E6;
  border: 1px solid var(--ink-line, #E4D9C2);
  border-radius: 12px;
  padding: 9px 12px;
  margin-bottom: 16px;
  text-align: left;
  line-height: 1.7;
}
.ask-restore-pop .arp-actions { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 880px) {
  .ask-clear-btn { padding: 4px 9px 5px; font-size: 12px; }
  /* 窄屏输入框加高一档：三行占位文案不再被裁掉（边界状态按钮才有意义） */
  .lib-ai-zone .lib-ai-card textarea { min-height: 96px; }
  /* v7.26：内联回答区窄屏收紧内边距（无边框无背景，只是文档流里的一段） */
  .lib-advice-zone .advice-page .advice-top { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-clear-btn { transition: none; }
}

/* ==========================================================================
   v7.20 · Agent Tools 三层回答策略：来源标注条 + 追问卡片
   --------------------------------------------------------------------------
   经验库从「唯一知识源」降级为「参考增强」：
     L1 有匹配   → 头部仍标「参考了 X 条往届经验」
     L2 无匹配   → 顶部暖橙标注条「经验库中暂无同类复盘，以下为通用教学建议」+ 追问卡片
     L3 完全跑题 → 跑题引导（沿用 .tool-zero），给回主题入口
   仍然只用米白 / 暖橙手账配色，不用霓虹、蓝紫渐变、粒子与关键帧动画。
   ========================================================================== */

/* —— L2 来源标注条：一眼分清「通用建议」不是往届复盘 —— */
.src-banner.is-general {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 2px;
  padding: 11px 13px;
  background: var(--accent-tint, #FCE6D6);
  border: 1px solid var(--accent-soft, #F5C7A7);
  border-left: 4px solid var(--accent, #E8925A);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink, #4A3F35);
  font-weight: 600;
}
.src-banner.is-general .sb-ico { flex: 0 0 auto; }

/* —— 证据行里的「通用教学建议」字样也跟着走暖橙，不用模型蓝紫 —— */
.evidence-line .el-src-general {
  color: var(--accent-deep, #C97038);
  font-weight: 700;
}

/* —— L2 追问卡片：先给建议，再问清关键信息 —— */
.ask-back-card {
  margin-top: 14px;
  padding: 14px 16px 13px;
  background: var(--bg-card, #FDFBF5);
  border: 1px dashed var(--accent-soft, #F5C7A7);
  border-radius: 14px;
}
.ask-back-card .abc-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-hand, "ZCOOL KuaiLe", KaiTi, serif);
  font-size: 15.5px;
  color: var(--accent-deep, #C97038);
  margin-bottom: 8px;
}
.ask-back-card .abc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.ask-back-card .abc-list li {
  display: flex;
  gap: 7px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink, #4A3F35);
}
.ask-back-card .abc-no {
  flex: 0 0 auto;
  color: var(--accent, #E8925A);
  font-weight: 700;
}
.ask-back-card .abc-foot {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft, #8A7B6C);
  border-top: 1px dashed var(--line-soft, #EFE5D0);
  padding-top: 8px;
}

/* —— L2 的节点块：库里没有同类复盘，改成「回来补一条」的引导 —— */
.tool-block.nodes.lib-empty .tb-hint { color: var(--ink-soft, #8A7B6C); }
.tool-block.nodes.lib-empty .tree-focus-cta { color: var(--accent-deep, #C97038); }

/* —— L3 跑题引导：补一句回主题的提示，语气保持温和 —— */
.tool-zero .tz-tip {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft, #8A7B6C);
}

@media (max-width: 880px) {
  .src-banner.is-general { font-size: 13px; padding: 10px 11px; }
  .ask-back-card { padding: 12px 13px 11px; }
  .ask-back-card .abc-list li { font-size: 13.5px; }
}

/* ==========================================================================
   v7.22 · 三类回答范式渲染
   范式 A 课前准备包 → 经验卡片（.exp-card，逐卡标注「往届复盘 / 通用教学建议」）
   范式 B 具体问题 → 叙事段落（.tb-body，情境理解 / 处理思路 / 背后的原因）
   范式 C 灵感 → 方向发散 / 推荐方向 / 完整方案（沿用分块 + 正文段落）
   手账风约束：米白纸面 + 暖橙强调；无关键帧、无渐变彩色、无霓虹。
   ========================================================================== */
.exp-cards { display: flex; flex-direction: column; gap: 12px; }
.exp-card {
  background: var(--paper, #FFFDF7);
  border: 1.5px solid var(--line-soft, #EFE5D0);
  border-left: 5px solid var(--accent, #E8925A);
  border-radius: 14px;
  padding: 13px 15px 11px;
  box-shadow: 0 2px 6px rgba(120, 72, 32, 0.06);
}
/* v7.29：卡片一律 AI 生成可读经验，默认展开正文；匹配到往届复盘的卡片额外挂一个
   可点开的「参考往届案例」折叠区（默认收起）。手账风：虚线分隔 + 暖橙文字，无关键帧动画。 */
.exp-card .ec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.exp-card .ec-title {
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink, #4A3B2A);
}
.exp-card .ec-src {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-tint, #FCE6D6);
  color: var(--accent-deep, #C05A28);
  white-space: nowrap;
}
/* 没挂上案例的卡片：来源标记用中性灰，避免和「有往届案例」抢注意力 */
.exp-card:not(.has-case) .ec-src { background: #EFE9DC; color: #7A6C52; }
.exp-card .ec-body {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-soft, #6B5A44);
}
.exp-card .ec-node {
  margin: 8px 0 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--accent-deep, #C05A28);
  text-decoration: underline dotted;
  font-family: inherit;
}
/* 卡片底部的「参考往届案例」折叠区 */
.exp-card .ec-case {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--line, #E4D7BF);
}
.exp-card .ec-case-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--accent-deep, #C05A28);
  text-align: left;
}
.exp-card .ec-case-toggle .ecc-ico { flex: 0 0 auto; font-size: 12px; }
.exp-card .ec-case-toggle .ecc-label { flex: 1 1 auto; text-decoration: underline dotted; }
.exp-card .ec-case-toggle .ecc-caret { flex: 0 0 auto; font-size: 11px; color: var(--ink-faint, #9A8A72); }
.exp-card .ec-case-body { margin: 8px 0 0; }
.exp-card .ec-case-body[hidden] { display: none; }
.exp-card .ec-case-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
.exp-card .ec-case-text {
  margin: 0 0 7px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-soft, #6B5A44);
}
/* 范式 B/C 的叙事正文：有段落的呼吸感，不再是短句清单 */
.tb-body { margin: 2px 0 0; }
.tb-body p {
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-soft, #6B5A44);
}
.tb-body p:last-child { margin-bottom: 2px; }
@media (max-width: 880px) {
  .exp-card { padding: 12px 13px 10px; }
  .exp-card .ec-title { font-size: 15px; }
  .exp-card .ec-body { font-size: 13px; }
  .exp-card .ec-case-toggle { font-size: 12px; }
  .exp-card .ec-case-text { font-size: 12px; }
  .tb-body p { font-size: 13px; }
}

/* ==========================================================================
   v7.31 · 经验库「总结型」：树 / 列表第一层 = 归纳经验条目，原始复盘退到折叠区
   手账风：米白卡 + 暖橙点缀 + 虚线分隔；折叠只切 hidden / aria-expanded，无动画。
   ========================================================================== */
/* ---- 列表：经验条目卡 ---- */
.dig-item {
  background: var(--bg-card, #FFFDF8);
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 14px;
  margin: 0 0 10px;
  overflow: hidden;
}
.dig-item.focused { border-color: var(--accent, #E8925A); box-shadow: 0 0 0 3px rgba(232, 146, 90, .14); }
.dig-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px 9px;
  cursor: pointer;
}
.dig-head .ll-fruit { flex: 0 0 auto; margin-top: 1px; }
.dig-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dig-t {
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink, #4A3F35);
}
.dig-b {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft, #6B5A44);
}
.dig-n {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-tint, #FCE6D6);
  color: var(--accent-deep, #C05A28);
  white-space: nowrap;
}
.dig-toggle {
  display: block;
  width: 100%;
  padding: 7px 13px;
  border: none;
  border-top: 1px dashed var(--line-dashed, #DCCFB6);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  font-family: inherit;
  color: var(--accent-deep, #C05A28);
}
.dig-toggle i { font-style: normal; float: right; color: var(--ink-faint, #B7A98F); }
.dig-cases { padding: 2px 10px 10px; }
.dig-case-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  margin: 0 0 6px;
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 10px;
  background: #FFFCF3;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.dig-case-row:last-child { margin-bottom: 0; }
.dig-case-row.hit { border-color: var(--accent, #E8925A); background: #FDF3E3; }
.dig-case-row .dc-fruit { flex: 0 0 auto; display: flex; }
.dig-case-row .dc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dig-case-row .dc-t { font-size: 12.5px; color: var(--ink, #4A3F35); line-height: 1.5; }
.dig-case-row .dc-s { font-size: 11px; color: var(--ink-soft, #8A7B6C); }
.dig-case-row .ll-arrow { flex: 0 0 auto; color: var(--ink-faint, #B7A98F); }

/* ---- 经验条目卡弹层（树上点果实） ---- */
.dig-pop .dig-pop-lede {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: #FDF6E9;
  border: 1.5px dashed var(--line-dashed, #DCCFB6);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink, #4A3F35);
}
.dig-pop .dig-toggle { border-top: none; padding: 4px 0 8px; font-size: 12.5px; }
.dig-pop .dig-case-list { border-top: 1px dashed var(--line-dashed, #DCCFB6); padding-top: 10px; }
@media (max-width: 720px) {
  .dig-head { padding: 11px 11px 8px; }
  .dig-t { font-size: 14px; }
  .dig-b { font-size: 12px; }
}

/* ==========================================================================
   v7.32 · 大树主视觉：树干=年级 / 枝条=分类 / 点分类展开归纳经验列表
   桌面 ≥880px 树左面板右；窄屏树上面板下。无关键帧动画（视觉禁令）。
   ========================================================================== */
.bt-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
@media (min-width: 880px) {
  .bt-wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}
.bt-svg { width: 100%; height: auto; display: block; }
.bt-cat, .bt-grade { cursor: pointer; }
.bt-cat:focus, .bt-grade:focus { outline: none; }
.bt-branch { opacity: .92; }

.bt-panel {
  background: var(--bg-card, #FFFDF8);
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 14px;
  padding: 12px 13px 10px;
  min-width: 0;
}
.bt-ph { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bt-ph-t { font-weight: 700; font-size: 15px; color: var(--ink, #4A3F35); }
.bt-ph-c { font-size: 11px; color: var(--ink-faint, #B7A98F); }
.bt-ph-x {
  margin-left: auto;
  border: none; background: none; cursor: pointer;
  font-size: 12px; font-family: inherit; color: var(--accent-deep, #C05A28);
}
.bt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 2px; }
.bt-chip {
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 999px;
  background: #FFFCF3;
  padding: 2px 11px;
  font-size: 11.5px;
  color: #6B5A44;
  cursor: pointer;
  font-family: inherit;
}
.bt-chip.on {
  background: var(--accent-tint, #FCE6D6);
  border-color: var(--accent, #E8925A);
  color: var(--accent-deep, #C05A28);
}
.bt-list { min-width: 0; margin-top: 4px; }
.bt-card-cat {
  display: inline-block;
  margin: 4px 0 8px 12px;
  font-size: 10.5px;
  color: #8A7B6C;
}
.bt-guide { padding: 6px 4px 2px; }
.btg-title {
  font-size: 15px;
  color: var(--ink, #4A3F35);
  margin-bottom: 8px;
}
.bt-guide p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft, #6B5A44);
}
.bt-guide b { color: var(--accent-deep, #C05A28); font-weight: 600; }
.btg-stats { font-size: 11.5px !important; color: var(--ink-faint, #B7A98F) !important; }
@media (max-width: 720px) {
  .bt-panel { padding: 10px 11px 9px; }
}
.bt-tree-col { position: relative; min-width: 0; }

/* v7.32 补：图例在窄屏不断字（图标 + 标签作为一个整体换行） */
.tree-legend > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ==========================================================================
   v7.33 · 水彩大树（竖向滚动版）：树=导航视觉（通栏在上，不塞正文），
   经验卡片区=阅读区（整幅在下，默认全部展开）。
   高亮：选中 = 暖橙，未选中 = 嫩绿水彩。无关键帧动画（视觉禁令）。
   ========================================================================== */
.bt-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  align-items: stretch;   /* 覆盖 v7.32 左右分栏留下的 align-items:start，否则子项缩成内容宽 */
}
.bt-tree-wrap { width: 100%; }
.bt-panel { width: 100%; }
.bt-tree-wrap { position: relative; min-width: 0; }
.bt-svg { width: 100%; height: auto; display: block; }
.bt-branch { opacity: .9; }
/* 选中暖橙 / 未选中嫩绿（CSS 覆盖 SVG 表现属性） */
.bt-cat { cursor: pointer; }
.bt-cat:focus, .bt-grade:focus { outline: none; }
.bt-cat .bt-chip-bg { fill: #F1F7E4; stroke: #B7CE8F; }
.bt-cat .bt-chip-name { fill: #4A3F35; }
.bt-cat .bt-chip-stat { fill: #8A9B5E; }
.bt-cat.on .bt-chip-bg { fill: #FDE7D2; stroke: #E8925A; stroke-width: 2; }
.bt-cat.on .bt-chip-name { fill: #C05A28; }
.bt-cat.on .bt-chip-stat { fill: #C05A28; }
.bt-cat.on .bt-branch { stroke: #E8925A !important; stroke-width: 6; }
.bt-cat:hover .bt-chip-bg { stroke: #E8925A; }
.bt-grade { cursor: pointer; }
.bt-grade .bt-grade-bg { fill: #F1F7E4; stroke: #B7CE8F; }
.bt-grade .bt-grade-name { fill: #5B7A5A; }
.bt-grade.on .bt-grade-bg { fill: #FDE7D2; stroke: #E8925A; stroke-width: 2; }
.bt-grade.on .bt-grade-name { fill: #C05A28; }
.bt-grade.on .bt-grade-dot { fill: #E8925A; }
.bt-grade.dead { cursor: default; }
.bt-twig { fill: none; stroke: #8FA06B; stroke-width: 1.6; opacity: .8; stroke-linecap: round; }
.bt-fruit { cursor: pointer; }
.bt-fruit:hover { opacity: .88; }

/* 果实悬浮气泡（简短标题，非弹窗） */
.bt-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #FFFDF6;
  border: 1px solid var(--accent, #E8925A);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(74, 63, 53, .14);
  padding: 5px 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink, #4A3F35);
  max-width: 240px;
  pointer-events: none;
  z-index: 5;
}

/* ---- 顶部工具栏：搜索 + 年级/类型下拉 + 图例 ---- */
.bt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 999px;
  background: #FFFCF3;
  padding: 6px 12px;
  color: var(--ink-faint, #B7A98F);
}
.bt-search .ico { flex: 0 0 auto; cursor: pointer; color: var(--accent-deep, #C05A28); }
.bt-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink, #4A3F35);
  outline: none;
}
.bt-sel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 999px;
  background: #FFFCF3;
  padding: 4px 10px;
  flex: 0 0 auto;
}
.bt-sel > span { font-size: 11.5px; color: var(--ink-faint, #B7A98F); }
.bt-sel select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23B7A98F' stroke-width='3' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right center;
  font-family: inherit;
  font-size: 12.5px;
  color: #6B5A44;
  padding-right: 14px;
  cursor: pointer;
  outline: none;
}
.bt-toolbar .tree-legend { margin-left: auto; }
@media (max-width: 720px) {
  .bt-toolbar .tree-legend { margin-left: 0; }
  .bt-search { flex-basis: 100%; }
}

/* ---- 卡片区：整幅在手账卡内，分组小标题 + 来源标签 ---- */
.bt-panel {
  background: var(--bg-card, #FFFDF8);
  border: 1px solid var(--line, #E7DCC7);
  border-radius: 14px;
  padding: 12px 13px 10px;
  min-width: 0;
}
.bt-ph { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bt-ph-t { font-weight: 700; font-size: 15px; color: var(--ink, #4A3F35); }
.bt-ph-c { font-size: 11px; color: var(--ink-faint, #B7A98F); }
.bt-ph-x {
  margin-left: auto;
  border: none; background: none; cursor: pointer;
  font-size: 12px; font-family: inherit; color: var(--accent-deep, #C05A28);
}
.bt-list { min-width: 0; margin-top: 4px; }
.bt-grouph {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 14px 0 8px;
  font-family: ZCOOL KuaiLe, KaiTi, serif;
  font-size: 14px;
  color: var(--ink, #4A3F35);
}
.bt-grouph:first-child { margin-top: 4px; }
.bt-grouph-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #9BB168;
  align-self: center;
}
.bt-grouph b { font-size: 10.5px; font-weight: 400; color: var(--ink-faint, #B7A98F); font-family: inherit; }
/* 卡片底部来源标签（复用全局 .chip 体系） */
.dig-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 13px 10px;
}
.dig-meta .chip { font-size: 10.5px; }
.dig-body { padding: 0 13px; }
.dig-body .dig-b { margin: 0; }
.bt-st { border: 1px dashed currentColor; background: transparent; }
.bt-st-ok { color: #C05A28; }
.bt-st-part { color: #6B7F3F; }
.bt-st-bud { color: #A8842E; }
.bt-st-bad { color: #8A7B6C; }
@media (max-width: 720px) {
  .bt-panel { padding: 10px 11px 9px; }
  .dig-meta { padding: 0 11px 9px; }
  .dig-body { padding: 0 11px; }
}

/* ==========================================================================
   v7.34 · AI 知识树（三层页面跳转版）
   --------------------------------------------------------------------------
   · 第 1 层：知识树首页 —— 根在上、向下分叉；一级节点浅绿大圆，
     二级节点白底暖橙描边小圆 + 右下角果实状态角标；棕色柔和曲线连线；
     页面竖向滚动，禁止横向滚动（SVG viewBox 自适应容器宽）。
   · 第 2/3 层：主题 / 经验详情页 —— 圆角 12px、浅米底、浅橙边框手账卡。
   ========================================================================== */

/* ---- 顶部工具栏：三视图切换胶囊（圆角胶囊样式） ---- */
.kt-view-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kt-view-btn {
  appearance: none;
  border: 1.5px solid #D8CBB4;
  background: #FFFDF8;
  color: var(--ink, #4A3F35);
  font-family: ZCOOL KuaiLe, KaiTi, serif;
  font-size: 13px;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
}
.kt-view-btn:hover { border-color: #E8925A; }
.kt-view-btn.on {
  background: #FDE7D2;
  border-color: #E8925A;
  color: #C05A28;
}

/* ---- 树区 ---- */
.kt-zone { width: 100%; min-width: 0; }

/* ==========================================================================
   v7.43 · 第 1 层「乡野地图」（原知识树首页 → 手绘乡野地图）
   --------------------------------------------------------------------------
   根 = 地图中心红顶砖房（红旗）；8 个固定地标槽位按序接当前维度的一级主题；
   地标 = 圆号牌 + 木牌（主题名 + N 复盘 · M 经验）；根→地标 = ochre 虚线。
   交互：点地标就地展开该主题原来的二级经验（手风琴，再点收起）。
     桌面 → 展开在图上（.mt-sub）：左右分侧 + 上下分向，面板永不出画
     手机 → 地图区只有 ~322×215px，塞不下 192px 面板，展开改到地图正下方的
            整卡宽展开卡（.mt-mopen），字号 14.5px / 触控条高 45px，可读性优先；
            同时「圆点+小签变橙 / 其余小签淡到 .3 / 名录对应行高亮」三处联动
   ★ 窄屏阈值：JS 侧用 isTall()（v74-knowtree.js，window.innerWidth <= 720），
     这里的媒体查询必须与它一致 —— 改一处必须改两处。
   ========================================================================== */
.mt-map { position: relative; width: 100%; border: 1.5px solid #EBDDC6; border-radius: 18px;
  overflow: hidden; background: #FAF6EE; box-shadow: 0 4px 18px rgba(122,96,60,.13); }
/* 地标用 %(相对 .mt-inner) 定位 → 容器必须与图像内容等比。
   用「固定高 + object-fit:contain」会在容器里留下上下留白，百分比基准就与画面错位
   （y 越小越偏上、y 越大越偏下，实测 83% 处能错 28px）。aspect-ratio 一劳永逸。 */
.mt-inner { position: relative; width: 100%; aspect-ratio: 1536/1024; }
.mt-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.mt-node { position: absolute; width: 0; height: 0; }
.mt-hit { position: absolute; left: 0; top: 0; width: 60px; height: 60px; padding: 0;
  transform: translate(-50%,-50%); border: 0; background: none; border-radius: 50%; cursor: pointer; }
/* 视觉层（数字圆点/手机小签/桌面铭牌）不拦截点击，让事件落到 .mt-hit 热区，
   这样数字序号区域乃至其周边一圈都能点开二级经验 */
.mt-pin, .mt-tag, .mt-plate { pointer-events: none; }
.mt-pin { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); width: 30px; height: 30px;
  border-radius: 50%; background: #FFFDF6; border: 2px solid #B08D68; box-shadow: 0 2px 7px rgba(90,66,40,.3);
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 "Noto Serif SC", serif; color: #8A5A32; }
.mt-plate { position: absolute; left: 0; top: 20px; transform: translateX(-50%);
  background: rgba(255,253,246,.95); border: 1.5px solid #B08D68; border-radius: 9px;
  padding: 4px 10px 5px; box-shadow: 0 2px 7px rgba(90,66,40,.22); text-align: center; white-space: nowrap; }
.mt-plate b { display: block; font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 14.5px; font-weight: 400;
  color: #5C4A3A; letter-spacing: .5px; }
.mt-plate i { font-style: normal; font-size: 10px; color: #9A8A76; }
.mt-root-pin { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); width: 34px; height: 34px;
  border-radius: 50%; background: #F6E3C8; border: 2px solid #B57A47; box-shadow: 0 2px 8px rgba(90,66,40,.35);
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.mt-root-plate { position: absolute; left: 0; top: 23px; transform: translateX(-50%); background: #FFFDF6;
  border: 2px solid #C98A4E; border-radius: 10px; padding: 5px 13px 6px; box-shadow: 0 3px 9px rgba(90,66,40,.26);
  text-align: center; white-space: nowrap; }
.mt-root-plate b { display: block; font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 16px; font-weight: 400; color: #8A4E22; }
.mt-root-plate i { font-style: normal; font-size: 10.5px; color: #9A8A76; }
.mt-cart { position: absolute; right: 0; bottom: 0; border-radius: 14px 0 0 0; background: #FFFDF6;
  border: 1.5px solid #B08D68; border-right: 0; border-bottom: 0; padding: 7px 13px 9px 14px; text-align: right; }
.mt-cart b { display: block; font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 14px; font-weight: 400;
  color: #8A5A32; letter-spacing: 1px; }
.mt-cart i { font-style: normal; font-size: 9.5px; color: #A2937F; }
.mt-cat { position: absolute; left: 0; top: 0; transform: translate(-50%,-100%); pointer-events: none; }

/* ---------- 桌面：点地标就地展开二级（.mt-sub） ---------- */
/* 展开时除了被点的那个，其余铭牌一律淡出 —— 面板会纵向铺开，靠近画布中心时必然扫过
   根铭牌与邻近地标，淡出才不会出现「字压字」。 */
.mt-map.has-open .mt-node:not(.is-open) .mt-plate,
.mt-map.has-open .mt-root-plate,
.mt-map.has-open .mt-cart { opacity: .28; transition: opacity .18s; }
.mt-node.is-open .mt-pin { background: #E8975A; border-color: #A9602C; color: #FFFDF6;
  box-shadow: 0 3px 11px rgba(150,90,40,.45); transform: translate(-50%,-50%) scale(1.1); }
/* 展开时铭牌改「侧向贴片」：贴到面板的反方向、与圆点垂直居中，就不会被二级面板压住 */
.mt-node.is-open .mt-plate { left: -19px; top: 0; transform: translate(-100%,-50%);
  text-align: right; border-color: #C98A4E; box-shadow: 0 3px 10px rgba(150,90,40,.3); }
.mt-node.is-open .mt-plate b { color: #8A4E22; }
.mt-node.is-open[data-side="l"] .mt-plate { left: 19px; right: auto; transform: translate(0,-50%); text-align: left; }
.mt-sub { position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* ★ .mt-sub 是 0×0，absolute 的 flex 子层「可用宽 = 0」→ shrink-to-fit 会把它压成一列竖字，
   必须给 .mt-subin 显式宽度（靠 white-space:nowrap 只是侥幸：一为长标题改 normal 立刻塌）。 */
.mt-subin { position: absolute; display: flex; flex-direction: column; gap: 7px; width: 192px; }
.mt-sub[data-side="r"] .mt-subin { left: 40px; align-items: flex-start; }
.mt-sub[data-side="l"] .mt-subin { right: 40px; align-items: flex-end; }
/* 纵向：上半张地图的地标向下展开、下半张向上 —— 面板永不顶出画布 */
.mt-sub[data-vd="d"] .mt-subin { top: 44px; }
.mt-sub[data-vd="u"] .mt-subin { top: auto; bottom: 44px; }
/* 5 号地标位于果园中部，向上展开时第一条容易贴近上方主题牌。
   仅在桌面端把它的二级列表向左下轻移，给最上面一条留出完整可读空间。 */
@media (min-width: 721px) {
  .mt-node[data-mi="4"] .mt-sub[data-side="l"] .mt-subin { right: 64px; }
  .mt-node[data-mi="4"] .mt-sub[data-vd="u"] .mt-subin { bottom: 20px; }
}
.mt-subin::before { content: ''; position: absolute; width: 0; border-left: 2px solid #C89B6A; opacity: .68; }
.mt-sub[data-side="r"] .mt-subin::before { left: -20px; }
.mt-sub[data-side="l"] .mt-subin::before { right: -20px; }
.mt-sub[data-vd="d"] .mt-subin::before { top: -46px; bottom: -6px; }
.mt-sub[data-vd="u"] .mt-subin::before { top: -6px; bottom: -46px; }
.mt-sub-pill { position: relative; display: block; text-align: left; cursor: pointer; max-width: 192px;
  background: #FFFDF6; border: 1.5px solid #C9A87C; border-radius: 11px; padding: 7px 12px 8px;
  box-shadow: 0 2px 7px rgba(90,66,40,.18);
  font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 13.5px; line-height: 1.28; color: #5C4A3A; }
.mt-sub-pill::before { content: ''; position: absolute; top: 50%; width: 22px; border-top: 2px solid #C89B6A; opacity: .68; }
.mt-sub[data-side="r"] .mt-sub-pill::before { left: -22px; }
.mt-sub[data-side="l"] .mt-sub-pill::before { right: -22px; }
.mt-sub-pill i { font-style: normal; font-size: 10px; color: #A2937F; margin-left: 8px; white-space: nowrap; }
.mt-fr { display: inline-flex; vertical-align: -3px; margin-right: 4px; }
/* 展开后必须留一个「进主题页看全部」的出口 —— 一级地标被展开动作占用后，
   原树「一级 → 主题页」的入口不能就这么没了。 */
.mt-sub-more { display: block; border: 0; background: none; cursor: pointer; padding: 2px 1px 0;
  font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 12px; color: #A97C46; letter-spacing: .3px; }
.mt-sub-more:hover { color: #8A5A32; }

/* ---------- 手机：地图小 + 地图下方整卡宽展开卡（.mt-mopen） ---------- */
@media (max-width: 720px) {
  /* 地图放大到 112%：322px 宽的区域装 7 个「圆点+主题名」太挤，左右各溢出 6% 由卡片裁掉
     （水车 13.5% / 果园 80.5% 仍完整可见）；上下留 28px 米色，画面不贴边。 */
  .mt-map { border-radius: 16px; padding: 28px 0; background: #F5EDDF; }
  .mt-inner { width: 112%; margin-left: -6%; aspect-ratio: 1536/1024; }
  .mt-plate, .mt-cat, .mt-sub { display: none !important; }
  .mt-pin { width: 25px; height: 25px; font-size: 11.5px; border-width: 1.8px; }
  .mt-root-pin { width: 29px; height: 29px; font-size: 14px; }
  .mt-tag { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap;
    background: rgba(255,253,246,.96); border: 1.4px solid #C9A87C; border-radius: 8px;
    padding: 2px 7px 3px; box-shadow: 0 1.5px 5px rgba(90,66,40,.22);
    font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 11.5px; color: #5C4A3A; letter-spacing: .3px; }
  .mt-tag[data-pd="b"] { top: 14px; }
  .mt-tag[data-pd="t"] { top: auto; bottom: 14px; }
  .mt-root-tag { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; top: 31px;
    background: #FFF7E8; border: 1.5px solid #C98A4E; border-radius: 9px; padding: 3px 9px 4px;
    font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 12px; color: #8A4E22; }
  /* 铭牌贴的是 .mt-inner 的右缘，而内层被拉到 112% → 会溢出到卡片外被裁，
     必须按溢出的那 6% 回收（否则「经验地图」的「图」字被切）。 */
  .mt-cart { border-radius: 10px 0 0 0; padding: 4px 9px 5px 10px; right: 6%; }
  .mt-cart b { font-size: 10.5px; letter-spacing: 0; }
  .mt-cart i { display: none; }
  .mt-node.is-open .mt-pin { transform: translate(-50%,-50%) scale(1.12); }
  .mt-node.is-open .mt-tag { background: #E8975A; border-color: #A9602C; color: #FFFDF6;
    box-shadow: 0 2px 9px rgba(150,90,40,.42); }
  .mt-map.has-open .mt-node:not(.is-open) .mt-tag { opacity: .3; transition: opacity .18s; }
  /* 手机端藏掉树脚那行操作提示（与上方计数行「点地标就地展开…」重复），
     但 #tree-topic-line（AI 聚类状态）必须留着 —— 那是判断 AI 有没有生效的唯一可读出口。 */
  .kt-foot-hint { display: none; }
}

/* ---------- 地图下方：展开卡（手机点地标 / 桌面「其它主题」）---------- */
.mt-mopen { margin-top: 11px; background: #FFFDF8; border: 1.5px solid #E4C79C; border-radius: 15px;
  padding: 12px 13px 11px; box-shadow: 0 2px 10px rgba(122,96,60,.10); }
.mt-mopen-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px;
  border-bottom: 1px dashed #EBDDC6; margin-bottom: 10px; }
.mt-mopen-no { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; background: #E8975A;
  border: 1.6px solid #A9602C; color: #FFFDF6; display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 "Noto Serif SC", serif; }
.mt-mopen-tt { flex: 1 1 auto; min-width: 0; }
.mt-mopen-tt b { display: block; font-family: "ZCOOL KuaiLe", KaiTi, serif; font-weight: 400;
  font-size: 16px; color: #5C4A3A; }
.mt-mopen-tt i { font-style: normal; font-size: 11px; color: #A2937F; }
.mt-mopen-x { flex: 0 0 auto; width: 31px; height: 31px; border-radius: 50%; border: 1.4px solid #EBDDC6;
  background: #FFFDF6; color: #A2937F; font-size: 15px; line-height: 1; padding: 0; cursor: pointer; }
.mt-mpill { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: #FFFDF6;
  border: 1.4px solid #EBDDC6; border-radius: 12px; padding: 11px 12px; margin-bottom: 8px; cursor: pointer;
  font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 14.5px; line-height: 1.34; color: #4A3F35; }
.mt-mpill:active { background: #FDF6EA; }
.mt-mn { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 6px; background: #FFF7E8;
  border: 1.3px solid #C9A87C; display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 "Noto Serif SC", serif; color: #8A5A32; }
.mt-mt { flex: 1 1 auto; min-width: 0; }
.mt-mc { flex: 0 0 auto; font-size: 10.5px; color: #A2937F; }
.mt-mempty { font-size: 12.5px; color: #A2937F; padding: 2px 2px 8px; }
.mt-mmore { display: block; width: 100%; border: 0; background: none; cursor: pointer; padding: 5px 1px 1px;
  text-align: center; font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 12.5px; color: #A97C46; letter-spacing: .3px; }

/* ---------- 地点名录（手机端第二段；桌面端只在主题数 > 8 时出现）---------- */
.mt-list { margin-top: 12px; }
.mt-list-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 8px; }
.mt-list-head b { font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 16px; font-weight: 400; color: #5C4A3A; }
.mt-list-head i { font-style: normal; font-size: 11px; color: #A2937F; }
.mt-row { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
  background: #FFFDF8; border: 1.5px solid #EBDDC6; border-radius: 13px; padding: 11px 12px;
  margin-bottom: 8px; cursor: pointer; box-shadow: 0 1px 4px rgba(122,96,60,.06); }
.mt-row:active { background: #FDF6EA; }
.mt-row.is-on { border-color: #E4C79C; background: #FDF3E3; }
.mt-no { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #FFF7E8;
  border: 1.6px solid #C9A87C; display: flex; align-items: center; justify-content: center;
  font: 700 12.5px/1 "Noto Serif SC", serif; color: #8A5A32; }
.mt-nm { flex: 1 1 auto; min-width: 0; }
.mt-nm b { display: block; font-family: "ZCOOL KuaiLe", KaiTi, serif; font-size: 16px; font-weight: 400; color: #4A3F35; }
.mt-nm i { font-style: normal; font-size: 11px; color: #A2937F; }
.mt-ar { flex: 0 0 auto; color: #C9A87C; font-size: 17px; }
.mt-root-row { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
  background: #FDF3E3; border: 1.5px solid #E4C79C; border-radius: 13px; padding: 11px 12px; margin-bottom: 10px; }

/* ---------- 桌面端「其它主题」（主题数 > 8 时，地图放不下的部分）---------- */
.mt-extra { margin-top: 10px; padding: 10px 12px; background: #FFFDF8; border: 1.5px dashed #E4C79C;
  border-radius: 14px; }
.mt-extra-h { font-size: 11.5px; color: #A2937F; margin-bottom: 8px; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-chip { display: inline-flex; align-items: center; gap: 7px; border: 1.4px solid #C9A87C; background: #FFFDF6;
  border-radius: 11px; padding: 7px 11px; cursor: pointer; font-family: "ZCOOL KuaiLe", KaiTi, serif;
  font-size: 13.5px; color: #5C4A3A; }
.mt-chip:hover { border-color: #E8975A; color: #8A5A32; }
.mt-chip .mt-mn { width: 19px; height: 19px; font-size: 10.5px; }

/* ---- 树下提示行 ---- */
.kt-foot-hint { color: var(--ink-faint, #B7A98F); }

/* ---- 第 2/3 层：详情页 ---- */
.kt-page {
  background: #FFFDF8;
  border: 1.5px solid #EBDDC6;
  border-radius: 20px;
  padding: 14px 16px 18px;
  box-shadow: 0 2px 10px rgba(122, 96, 60, .07);
}
.kt-page-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1.5px dashed #EBDDC6;
}
.kt-page-title {
  font-family: ZCOOL KuaiLe, KaiTi, serif;
  font-size: 19px;
  color: var(--ink, #4A3F35);
  min-width: 0;
  overflow-wrap: anywhere;
}
.kt-page-count { font-size: 12px; color: var(--ink-faint, #B7A98F); }

.kt-ai-lede {
  position: relative;
  margin: 14px 0 4px;
  background: #FAF6EE;
  border: 1.5px solid #F3CFA8;
  border-radius: 12px;
  padding: 11px 13px;
}
.kt-lede-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #E8925A;
  color: #FFFDF8;
  font-size: 10.5px;
  vertical-align: 2px;
}
.kt-ai-lede p { margin: 0; font-size: 13.5px; line-height: 1.75; color: #5C4A3A; display: inline; }

/* 主题页经验卡（圆角 12px / 浅米底 / 浅橙边框，复用 dig 卡骨架） */
.kt-cards { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.kt-card {
  background: #FFFDF8;
  border: 1.5px solid #F3CFA8;
  border-radius: 12px;
  padding: 12px 0 4px;
  cursor: pointer;
  outline: none;
}
.kt-card:hover, .kt-card:focus-visible { border-color: #E8925A; box-shadow: 0 2px 8px rgba(232, 146, 90, .16); }
.kt-card .dig-head { display: flex; align-items: center; gap: 8px; padding: 0 13px; }
.kt-card .dig-head .dig-t {
  font-family: ZCOOL KuaiLe, KaiTi, serif;
  font-size: 15px;
  color: var(--ink, #4A3F35);
  min-width: 0;
}
.kt-card .dig-head .ll-fruit { flex: none; display: inline-flex; }
.kt-card .dig-b { font-size: 13px; line-height: 1.7; color: #5C4A3A; }
.kt-st-ok { color: #C05A28; }
.kt-st-part { color: #6B7F3F; }
.kt-st-bud { color: #A8842E; }
.kt-st-ok .fr-mini, .kt-st-part .fr-mini, .kt-st-bud .fr-mini { margin-right: 3px; vertical-align: -3px; }

/* 第 3 层：原始复盘列表 */
.kt-exp-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 2px; }
.kt-cases-head {
  margin: 14px 0 8px;
  font-family: ZCOOL KuaiLe, KaiTi, serif;
  font-size: 14px;
  color: var(--ink, #4A3F35);
}
.kt-case-list { display: flex; flex-direction: column; gap: 8px; }
.kt-case-row { width: 100%; text-align: left; }
.kt-case-row .dc-x {
  display: block;
  font-size: 11.5px;
  color: var(--ink-faint, #B7A98F);
  margin-top: 3px;
  line-height: 1.6;
}
.kt-exp-foot {
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-faint, #B7A98F);
  border-top: 1.5px dashed #EBDDC6;
  padding-top: 10px;
}
.kt-goback-tree {
  border: none; background: none; color: #C05A28; cursor: pointer;
  font-size: inherit; text-decoration: underline; padding: 0;
}

/* ---- 工具栏窄屏排布 ---- */
@media (max-width: 720px) {
  .kt-view-btn { font-size: 12px; padding: 7px 11px; }
  .kt-page { padding: 12px 11px 15px; border-radius: 16px; }
  .kt-page-title { font-size: 17px; }
  .kt-ai-lede p { display: block; margin-top: 6px; font-size: 13px; }
}


/* ==========================================================================
   v8.1 录入页改版 / v8.2 排列修正 / v8.5 左栏只剩猫与它的话
   —— 覆盖上面 v7.14 的「单列居中 + 全宽悬浮输入栏」结构
   左栏 = 大尺寸朝朝 + 它头顶的一个气泡（v8.5：只有当前这一轮朝朝的话，
          从小猫头顶冒出来；左栏空出来后猫放大到 256px）
   右栏 = 顶部条（标题 + 保存草稿 / 提交经验）+ 7 题提示（只读）+ 输入区
          （v8.5：点【说好了】后那句话留在框里，朝朝记完再清）
   v8.6 背景：录入页铺一张与主页 2D 水彩场景「平行」的 3D 渲染场景
         （暖白蒙版已烘焙进 assets/chat-scene.jpg 本身，不再挂蒙版图层）
   ========================================================================== */
body.page-review_chat #app { max-width: none; padding: 0; }

/* ---- v8.6 录入页背景：主页那条 2D 水彩线的 3D 平行版 ----
   同一套题材与色调（右侧窗台 / 书堆 / 雏菊瓶 + 左侧田野·村落·远山），
   画风换成 3D 渲染，去匹配录入页那只 3D 朝朝。
   暖白蒙版（垂直 .54 ~ .64）已经烘焙进图片本身 —— 所以这里只需要一行背景
   声明，不用再挂一个蒙版图层：少一层堆叠，也就少一处会被祖先 stacking
   context 影响的隐患（页面上的猫、气泡都在内容层，直接压在背景之上）。
   底部导航是不透明的，背景只铺在内容区之上、导航条之下。 */
body.page-review_chat {
  background: #FAF6EE url(assets/chat-scene.jpg) center center / cover no-repeat;
}

.chat-page {
  max-width: none;
  margin: 0;
  height: calc(100dvh - 62px);
  padding: 10px 20px 12px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* ---- 左栏：只剩朝朝 + 它头顶的一个气泡（v8.5） ----
   左栏不再堆对话流。气泡里只有当前这一轮朝朝说的话，从小猫头顶冒出来，
   尾巴朝下指着它；猫与气泡整组在左栏垂直居中。
   左栏空出来之后朝朝同步放大：196 → 256px（v8.6 起背景换成 3D 场景，光晕撤掉） */
.chat-left {
  flex: 0 0 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.chat-left .chat-cat-side {
  width: 100%;
  flex: 0 0 auto;
  padding-bottom: 0;
  justify-content: center;
}
/* 猫头顶的气泡：宽度给足可读性，位置在猫的正上方。
   z-index 抬起来是保险：猫那组在 DOM 里排在气泡之后，后绘制的会盖住先绘制的
   （v8.5 那会儿朝下的小尾巴就是被 300px 的光晕圆整个吃掉过） */
.chat-left .chat-say {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: 340px;
  min-width: 0;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.chat-left .chat-say .bub {
  max-width: 100%;
  padding: 13px 17px 14px;
  font-size: 15px;
  line-height: 1.66;
  border-radius: 18px;
  border-bottom-left-radius: 18px;
  transform: rotate(-.35deg);
}
.chat-left .chat-say .bub .bub-who { margin-bottom: 3px; opacity: .72; }
/* 尾巴：方块转 45° 后朝下（覆盖 .bub.ai 默认那个朝左的尖角） */
.chat-left .chat-say .bub.ai::before {
  left: 50%;
  bottom: -7px;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  background: var(--bg-card);
  border: none;
  border-right: 1.5px solid var(--ink-line);
  border-bottom: 1.5px solid var(--ink-line);
  border-radius: 0 0 2px 0;
  transform: rotate(45deg);
}
/* 思考态：动效仍在同一个气泡里（不再多冒一个气泡） */
.chat-left .chat-say .bub.thinking { font-size: 14px; }

/* 猫这一组单独成层：光晕要相对"猫"定位，不能跟着头顶气泡一起往下跑 */
.chat-left .cat-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* v8.6：猫背后的暖白光晕撤掉了。
   录入页现在铺的是一张彩色场景背景，那圈 300px 的实心暖白圆（#FDF7F6 到 62%
   仍是纯色）在纯米白底上看不出来，一压到场景上就变成一块突兀的白圆盘。
   撤掉之后朝朝直接站在场景里，读法更接近主页「猫站在石台上」那一版。 */
.chat-left .chat-cat-side .cat-svg { width: 256px !important; height: 256px !important; }
.chat-left .chat-cat-side .stage-ground { width: 214px; margin-top: -9px; }

/* ---- 右栏：顶部条 + 7 题提示 + 输入区 ---- */
.chat-right {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-right .chat-side-top { flex: 0 0 auto; }
.chat-actions {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 两个出口：保存草稿 = 次级描边；提交经验 = 暖橙实色主按钮 */
.chat-btn {
  font-family: inherit;
  border-radius: 999px;
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.chat-btn.ghost {
  background: var(--bg-card);
  border: 1.5px solid var(--accent-soft);
  color: var(--accent-deep);
}
.chat-btn.ghost:hover:not(:disabled) { background: var(--accent-tint); }
.chat-btn.primary {
  background: var(--accent);
  border: 1.5px solid var(--accent-deep);
  color: #FFFDF9;
}
.chat-btn.primary:hover:not(:disabled) { transform: translateY(-1px); }
.chat-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* 7 个启发性问题：做轻——没有卡片底、没有点击态，只留一条细引导线，
   是一组"提示语"而不是问卷。整组在右栏上半区垂直居中，上下留白对称 */
.chat-right .chat-hints-box,
.chat-right #chat-hints {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 6px 4px 0;
}
/* 引导线挂在内层，只跟这组提示文字等高（外层要撑满上半区做垂直居中） */
.chat-right .hints-inner {
  border-left: 2px solid #EFD9B6;
  padding: 2px 4px 4px 16px;
}
.chat-right .chat-hints-box .hints-cap,
.chat-right #chat-hints .hints-cap {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 7px;
  font-size: 13px;
  letter-spacing: .5px;
}
.chat-right .hint-line { font-size: 13.5px; line-height: 1.95; }

/* ---- v8.7 录入工作区：提示折叠 → 草稿同步 → 页面下方提交 ----
   只调整右栏内容结构；左侧朝朝、场景背景、导航与品牌图案均保持不变。 */
.chat-right .chat-side-top {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-work {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-right .chat-hints-box,
.chat-right #chat-hints {
  flex: 0 0 auto;
  min-height: 0;
  display: block;
  overflow: visible;
  padding: 0;
  background: rgba(255, 252, 245, .90);
  border: 1.5px solid #E9D5B3;
  border-radius: 15px;
  box-shadow: 0 4px 13px rgba(74, 63, 53, .045);
}
.chat-guide-head {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-guide-head > span { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.chat-guide-head b {
  flex: 0 0 auto;
  font-family: "ZCOOL KuaiLe", KaiTi, serif;
  font-size: 14px;
  color: #8A5A2B;
  letter-spacing: .5px;
}
.chat-guide-head small { color: var(--ink-faint); font-size: 11.5px; line-height: 1.45; }
.chat-guide-head i {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F7EBD7;
  color: #A66A3A;
  font-style: normal;
  font-size: 15px;
}
.chat-guide-preview {
  margin: -2px 13px 10px;
  padding-top: 8px;
  border-top: 1px dashed #EAD9BE;
  color: #9B8872;
  font-size: 11.5px;
  line-height: 1.55;
}
.chat-right .hints-inner {
  max-height: 184px;
  overflow-y: auto;
  margin: 0 13px 11px;
  border-left: 2px solid #EFD9B6;
  padding: 0 4px 0 14px;
}
.chat-right .hint-line { color: #6E5A44; font-size: 12.5px; line-height: 1.8; }

.chat-draft-shell {
  flex: 1 1 auto;
  min-height: 168px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 14px 15px 12px;
  background: rgba(255, 253, 248, .94);
  border: 1.5px solid #E8D1AA;
  border-radius: 18px;
  box-shadow: 0 7px 20px rgba(74, 63, 53, .065);
}
.chat-draft-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #E8D8BF;
}
.chat-draft-kicker {
  display: block;
  margin-bottom: 2px;
  color: #C7753F;
  font-size: 10.5px;
  letter-spacing: 1px;
}
.chat-draft-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: "ZCOOL KuaiLe", KaiTi, serif;
  font-size: 18px;
  font-weight: 500;
}
.chat-draft-count {
  flex: 0 0 auto;
  padding: 4px 10px 5px;
  border: 1px solid #E8CCA1;
  border-radius: 999px;
  background: #FFF7E9;
  color: #A66737;
  font-size: 11.5px;
}
.chat-draft-empty {
  flex: 1 1 auto;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #A99B88;
  text-align: center;
}
.chat-draft-empty b { color: #7D6C59; font-size: 13px; font-weight: 500; }
.chat-draft-empty span { max-width: 390px; font-size: 11.5px; line-height: 1.65; }
.chat-draft-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 9px 3px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #DEC9A7 transparent;
}
.chat-draft-card {
  flex: 0 0 auto;
  padding: 9px 11px;
  border: 1px solid #EEE0C9;
  border-radius: 12px;
  background: #FFFCF6;
}
.chat-draft-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chat-draft-card-top span { color: #A45D30; font-size: 11.5px; font-weight: 600; }
.chat-draft-card-top em {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F6E8D2;
  color: #A36B3C;
  font-size: 10.5px;
  font-style: normal;
}
.chat-draft-card p {
  margin: 5px 0 0;
  color: #5F5143;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-draft-original { margin-top: 5px; }
.chat-draft-original summary {
  width: fit-content;
  color: #A8957F;
  font-size: 10.5px;
  cursor: pointer;
  list-style-position: inside;
}
.chat-draft-original div {
  margin-top: 5px;
  padding: 6px 8px;
  border-left: 2px solid #E9D5B3;
  color: #8B7965;
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.chat-draft-status {
  flex: 0 0 auto;
  margin-top: 7px;
  color: #70865D;
  font-size: 11.5px;
  line-height: 1.4;
}
.chat-draft-status span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-right: 5px;
  border-radius: 50%;
  background: #E6EEDC;
  font-size: 10px;
}
.chat-final-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 9px;
}
.chat-final-actions .chat-btn { width: 100%; height: 38px; font-size: 13.5px; }

/* 输入区回到右栏正常流里（不再是全宽悬浮固定），
   收成一块轻手账面板：右栏下方是明确的"核心输入区" */
.chat-right .chat-dock {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  flex: 0 0 auto;
  margin-top: 0;
  background: #FDF8EE;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px solid #EFE2C8;
  border-radius: 18px;
  padding: 9px 11px 11px;
  box-shadow: 0 5px 16px rgba(74, 63, 53, .055);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-right .chat-dock { position: relative; }
/* 「已说出」态（v8.5）：点【说好了】后那句话先留在框里，
   朝朝把这一轮记完才清空 —— 期间只读、描边转暖、右上角挂个轻标 */
.chat-right .chat-dock.said { border-color: #E8D3AE; background: #FDF6E9; }
.chat-right .chat-dock.said::before {
  content: "已说出";
  position: absolute;
  top: 9px;
  right: 13px;
  z-index: 2;
  font-size: 11.5px;
  letter-spacing: .5px;
  color: #C0703A;
  background: #FDF8EE;
  border: 1px solid #EFD9B6;
  border-radius: 999px;
  padding: 1px 8px;
}
.chat-right .chat-dock #chat-ta.said {
  background: #FBF3E6;
  cursor: default;
}
.chat-right .chat-dock .mic-hint { padding-left: 3px; }
.chat-right .chat-dock .chat-input-row {
  max-width: none;
  margin: 0;
  padding: 0;
  align-items: flex-end;
}
.chat-right .chat-dock .mic-side { flex: 0 0 auto; }
.chat-right .chat-dock #chat-ta { background: var(--bg-card); }

/* 输入框：单行 → 多行（Enter 提交、Shift+Enter 换行、随内容长高） */
#chat-ta {
  height: auto;
  min-height: 46px;
  max-height: 132px;
  border-radius: 16px;
  padding: 12px 16px;
  line-height: 1.5;
  font-family: inherit;
  font-size: 14.5px;
  resize: none;
  overflow-y: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- 手机竖屏：分栏放不下 → 只显示「把手机横过来」引导 ---- */
.chat-rotate-tip {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  text-align: center;
  color: var(--ink-soft);
}
.chat-rotate-tip .crt-cat { display: flex; justify-content: center; margin-bottom: 4px; }
.chat-rotate-tip h3 {
  font-family: "ZCOOL KuaiLe", KaiTi, serif;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 2px;
}
.chat-rotate-tip p { font-size: 13px; margin: 0; opacity: .82; }

@media (orientation: portrait) and (max-width: 900px) {
  .chat-page { display: block; height: calc(100dvh - 62px); padding: 0 16px; }
  .chat-left, .chat-right { display: none; }
  .chat-rotate-tip { display: flex; }
  /* v8.6：竖屏引导页**不铺** 3D 场景。
     这一屏只是「把手机横过来」的过渡提示，没有录入内容需要衬景；
     而且这里的猫是 2D 素材（tilt GIF，近白底 + darken 融底），
     压在彩色场景上会直接露出白色方块底。保持纸面底色最干净。 */
  body.page-review_chat { background: var(--bg); }
}

/* ---- 手机横屏：分栏保留，尺寸整体收紧 ---- */
@media (orientation: landscape) and (max-height: 560px) {
  .chat-page { height: calc(100dvh - 62px); padding: 6px 12px 8px; gap: 12px; }
  .chat-left { flex: 0 0 40%; gap: 4px; }
  .chat-left .chat-cat-side .cat-svg { width: 140px !important; height: 140px !important; }
  .chat-left .chat-cat-side .stage-ground { width: 118px; margin-top: -7px; }
  .chat-left .chat-say { max-width: 300px; margin-bottom: 9px; }
  .chat-left .chat-say .bub { padding: 9px 12px 10px; font-size: 12.5px; line-height: 1.6; }
  .chat-left .chat-say .bub.thinking { font-size: 12px; }
  .chat-right .chat-dock { padding: 6px 8px 8px; border-radius: 14px; gap: 4px; }
  .chat-right { gap: 6px; }
  .chat-right .chat-side-top .chat-title { font-size: 15px; }
  .chat-btn { height: 28px; padding: 0 12px; font-size: 12.5px; }
  .chat-right .hint-line { font-size: 12px; line-height: 1.62; }
  .chat-right .chat-hints-box,
  .chat-right #chat-hints { padding: 0 4px 2px 0; }
  .chat-right .hints-inner { padding: 0 3px 2px 12px; }
  #chat-ta { min-height: 42px; max-height: 104px; padding: 10px 14px; font-size: 14px; }
  .chat-right .chat-dock .chat-send { height: 40px; padding: 0 16px; font-size: 14px; }
  .chat-right .chat-dock .mic-side { width: 38px; height: 38px; }
  .chat-work { gap: 5px; }
  .chat-guide-head { padding: 6px 10px; }
  .chat-guide-head small, .chat-guide-preview { display: none; }
  .chat-right .hints-inner { max-height: 90px; margin: 0 10px 7px; }
  .chat-draft-shell { min-height: 90px; padding: 8px 10px 7px; border-radius: 13px; }
  .chat-draft-head { padding-bottom: 6px; }
  .chat-draft-kicker { display: none; }
  .chat-draft-head h2 { font-size: 15px; }
  .chat-draft-card { padding: 6px 8px; }
  .chat-draft-card p { font-size: 11.5px; line-height: 1.5; }
  .chat-draft-original, .chat-draft-status { display: none; }
  .chat-final-actions { gap: 6px; }
  .chat-final-actions .chat-btn { height: 30px; font-size: 12px; }
}

/* ==========================================================================
   v8.1 经验详情页：对话原文按「我 / 朝朝」呈现
   —— 原来套用老表单的「第 N 题 · 问题」标签，会把朝朝的开场白标成第 1 题
   ========================================================================== */
.tr-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.tr-line { display: flex; gap: 10px; align-items: flex-start; }
.tr-line .tr-who {
  flex: 0 0 auto;
  width: 34px;
  font-size: 12px;
  color: var(--ink-faint);
  padding-top: 3px;
}
.tr-line.me .tr-who { color: var(--accent-deep); }
.tr-line .tr-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   v7.42 · 录入页「课件存档」（入口 = 输入框左侧回形针 + 输入区上方小票条）
   --------------------------------------------------------------------------
   课件只做「存档 + 随经验入库」，朝朝不读内容，所以这里没有任何"解析中"的动效；
   上传进度条走的是真实上传进度（XHR upload.onprogress），不是装饰动画。
   配色沿用现有手账组件：奶白底 #FFF9EC / 描边 #EBCFA0 / 暖橙主色 var(--accent)。
   ========================================================================== */
.chat-attach {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--accent-soft);
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background .15s ease;
}
.chat-attach:hover { background: var(--accent-tint); }
.chat-attach svg { width: 20px; height: 20px; display: block; }

/* 小票条：右栏里位于「参考回答方向」与输入区之间的一行 */
.cc-bar { flex: 0 0 auto; display: flex; align-items: center; }
.cc-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px dashed #E0C79A;
  background: #FFFDF7;
  border-radius: 12px;
  padding: 7px 13px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: #8A5A2B;
}
.cc-add:hover { background: var(--accent-tint); }
.cc-add svg { width: 15px; height: 15px; display: block; flex: 0 0 auto; }
.cc-add .cc-sub { color: var(--ink-faint); font-size: 11.5px; }

.cc-wrap {
  width: 100%;
  background: #FFF9EC;
  border: 1.5px solid #EBCFA0;
  border-radius: 12px;
  padding: 7px 12px;
}
.cc-wrap.local { background: #FFFBF2; border-color: #E7D2AC; }
.cc-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #6E5A44; }
.cc-row svg { width: 16px; height: 16px; display: block; flex: 0 0 auto; color: var(--accent-deep); }
.cc-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-meta { color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }
.cc-ok { color: #6E8A5C; font-size: 11.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.cc-wait { color: #B07A46; font-size: 11.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.cc-ok svg, .cc-wait svg { width: 14px; height: 14px; }
.cc-x {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--ink-faint);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.cc-x:hover { color: var(--accent-deep); }
.cc-x:first-of-type { margin-left: auto; }
.cc-bar-track { margin-top: 7px; height: 4px; border-radius: 999px; background: #F0E2C8; overflow: hidden; }
.cc-bar-fill { height: 100%; border-radius: 999px; background: #E8925A; transition: width .2s linear; }

/* ---- 详情页：本节课课件折叠块 ---- */
.cw-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1.5px solid #EBCFA0;
  background: #FFF9EC;
  border-radius: 12px;
  font-size: 13.5px;
  color: #6E5A44;
  margin: 6px 0 0;
  flex-wrap: wrap;
}
.cw-item > svg { width: 18px; height: 18px; display: block; flex: 0 0 auto; color: var(--accent-deep); }
.cw-item .cw-name { color: var(--ink); word-break: break-all; }
.cw-item .cw-meta { color: var(--ink-faint); font-size: 12px; white-space: nowrap; }
.cw-item .cw-act { margin-left: auto; display: flex; gap: 12px; }
.cw-item .cw-act a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; font-size: 12.5px; }
.cw-card .cw-note {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 7px;
  line-height: 1.7;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cw-card .cw-note svg { width: 14px; height: 14px; display: block; flex: 0 0 auto; color: #6E8A5C; }

/* ---- 手机横屏：纵向空间紧张，小票条收窄，并把"可选"说明藏掉 ---- */
@media (orientation: landscape) and (max-height: 560px) {
  .chat-attach { width: 40px; height: 40px; }
  .chat-attach svg { width: 18px; height: 18px; }
  .cc-add { padding: 5px 11px; font-size: 12px; }
  .cc-add .cc-sub { display: none; }
  .cc-wrap { padding: 5px 10px; }
  .cc-row { font-size: 12px; gap: 7px; }
  .cc-name { max-width: 40vw; }
}