/* ==========================================================================
   朝阳薪传 v6.5 · 模块二（窗口语言统一）+ 模块三（暖光语言动效）
   --------------------------------------------------------------------------
   A. 手账窗口皮肤        米白圆角卡片 + 左上角斜贴半透明和纸胶带 + 暖橙描边 + 轻投影
   B. AI 问问题页的猫     卡片角落的猫 + 思考泡泡（水彩小图标）/ 翻经验册
   C. 思维树的暖光        枝干内的流动光点 / 命中路径的阳光点亮 / 树根的小猫
   D. 荧光笔标记          AI 回答里的关键词淡淡光晕
   E. 无障碍与响应式

   约定：不改 style.css / style-v63.css / style-v64.css 里的既有规则；
   需要覆盖的地方统一放在文末「F. 覆盖既有规则」段，便于对照与回滚。
   色板全部沿用 v6 的 CSS 变量，禁止霓虹 / 蓝紫渐变 / 粒子 / 赛博光效。
   ========================================================================== */

:root {
  /* 窗口皮肤 */
  --jn-line: #EFC7A2;                                    /* 暖橙描边（比 accent-soft 略实） */
  --jn-line-soft: #F3DFC6;                               /* 次级暖橙描边 */
  --jn-radius: 18px;
  --jn-shadow: 0 2px 5px rgba(74, 63, 53, .05), 0 12px 30px rgba(74, 63, 53, .07);
  --jn-shadow-hi: 0 3px 8px rgba(74, 63, 53, .07), 0 16px 38px rgba(74, 63, 53, .10);
  /* 暖光 */
  --warm-glow: rgba(232, 146, 90, .42);
  --gold-glow: rgba(230, 200, 110, .55);
  --cy-tape: rgba(232, 146, 90, .34);
}

/* ==========================================================================
   A. 手账窗口皮肤
   ========================================================================== */

/* ---- A1. 窗口本体 ---- */
.jn-win {
  position: relative;
  background: var(--bg-card);
  border: 1.5px solid var(--jn-line);
  border-radius: var(--jn-radius);
  box-shadow: var(--jn-shadow);
}
.jn-win:hover { box-shadow: var(--jn-shadow-hi); }
/* 窗口内的次级卡片：同一套底色与圆角，但描边更淡、不加胶带，保持层级 */
.jn-win .card,
.jn-win .advice-block,
.jn-win .case-mini,
.jn-win .followup-card,
.jn-win .idea-card {
  border-radius: 14px;
  border-color: var(--jn-line-soft);
}

/* ---- A2. 和纸胶带 ----
   半透明 + 细纤维纹 + 两端斜切口，左上角斜贴。用真实元素（不占 ::before）,
   因为多数容器已经把伪元素用在别处。 */
.jn-tape {
  position: absolute;
  z-index: 5;
  left: -15px;
  top: -11px;
  width: 108px;
  height: 25px;
  pointer-events: none;
  transform: rotate(-25deg);
  border-radius: 1px;
  background-color: var(--cy-tape);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 2px, rgba(255, 255, 255, 0) 2px 5px),
    linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(201, 112, 56, .12));
  box-shadow: 0 1px 3px rgba(74, 63, 53, .12);
  clip-path: polygon(0% 6%, 4% 0%, 100% 0%, 96% 100%, 3% 100%);
  opacity: .92;
}
/* 向日葵色变体 · 右上角（同一窗口最多两条，避免糊成一片） */
.jn-tape.jn-tape-sun {
  left: auto;
  right: -13px;
  top: -10px;
  width: 84px;
  height: 22px;
  transform: rotate(21deg);
  background-color: var(--tape-sun);
  clip-path: polygon(4% 0%, 100% 5%, 97% 100%, 0% 99%);
}
/* 窄屏：胶带缩一点，别把卡片挤歪 */
@media (max-width: 480px) {
  .jn-tape { width: 84px; height: 21px; left: -11px; top: -9px; }
  .jn-tape.jn-tape-sun { width: 66px; height: 19px; right: -9px; top: -8px; }
}

/* ==========================================================================
   B. AI 问问题页：卡片角落的猫 + 思考泡泡 / 翻经验册
   ========================================================================== */

/* ---- B1. 角落的猫 ---- */
.ask-cat-corner {
  position: absolute;
  right: 10px;
  bottom: -6px;
  width: 66px;
  height: 66px;
  z-index: 4;
  pointer-events: none;
  transform: rotate(-3deg);
}
.ask-cat-corner .cat-svg { width: 66px !important; height: 66px !important; }
@media (max-width: 480px) {
  .ask-cat-corner { width: 56px; height: 56px; right: 6px; bottom: -4px; }
  .ask-cat-corner .cat-svg { width: 56px !important; height: 56px !important; }
}

/* ---- B2. 等待回答的手账窗口 ---- */
.ai-wait {
  max-width: 520px;
  margin: 26px auto 0;
  padding: 30px 24px 26px;
  text-align: center;
}
.ai-wait h2 {
  margin: 12px 0 6px;
  font-family: var(--font-hand);
  font-size: 20px;
  letter-spacing: 1.5px;
  color: var(--ink);
}
.ai-wait .muted { font-size: 13.5px; line-height: 1.7; }
.ai-wait-foot {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.7;
}
.ai-wait-foot strong { color: var(--accent-deep); }

/* 猫 + 泡泡这一组 */
.ai-wait-stage {
  position: relative;
  display: inline-block;
  width: 182px;
  height: 186px;
}
.ai-wait-cat {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 84px;
  height: 84px;
  margin-left: -42px;
}
.ai-wait-cat .cat-svg { width: 84px !important; height: 84px !important; }
/* 猫脚下的暖光地台（替代转圈的 spinner） */
.ai-wait-ground {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 92px;
  height: 12px;
  margin-left: -46px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 112, 56, .17), rgba(201, 112, 56, 0));
  animation: aiGroundBreath 2.4s ease-in-out infinite;
}
@keyframes aiGroundBreath {
  0%, 100% { transform: scaleX(1); opacity: .9; }
  50%      { transform: scaleX(.88); opacity: .6; }
}

/* ---- B3. 泡泡：白底手绘边 + 小尾巴 ---- */
.ai-bubble {
  position: absolute;
  left: 50%;
  top: 2px;
  min-width: 124px;
  padding: 11px 13px 10px;
  margin-left: -62px;
  background: #FFFDF8;
  border: 1.5px solid var(--jn-line);
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 3px 10px rgba(74, 63, 53, .09);
  animation: aiBubbleIn .42s cubic-bezier(.2, 1.3, .45, 1) backwards;
}
@keyframes aiBubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
.ai-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -6px;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: #FFFDF8;
  border-right: 1.5px solid var(--jn-line);
  border-bottom: 1.5px solid var(--jn-line);
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}
.ai-bubble-cap {
  display: block;
  font-family: var(--font-scribble);
  font-size: 12.5px;
  letter-spacing: .5px;
  color: var(--accent-deep);
  text-align: center;
  margin-bottom: 6px;
}

/* ---- B4. 水彩小图标（思考中：经验册 / 叶子 / 向日葵 / 放大镜 逐个闪动） ---- */
.wc-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 30px;
}
.wc-ico {
  width: 26px;
  height: 26px;
  opacity: .45;
  animation: wcBlink 2.4s ease-in-out infinite;
}
.wc-ico:nth-child(2) { animation-delay: .3s; }
.wc-ico:nth-child(3) { animation-delay: .6s; }
.wc-ico:nth-child(4) { animation-delay: .9s; }
@keyframes wcBlink {
  0%, 62%, 100% { opacity: .45; transform: translateY(0) scale(.94); }
  26%           { opacity: 1;   transform: translateY(-3px) scale(1.08); }
}
/* 水彩感：淡淡的色晕，不是实心色块 */
.wc-ico .wc-wash { opacity: .45; filter: blur(2px); }

/* ---- B5. 翻经验册：一本小册子，书页一张张翻过去 ---- */
.flip-book {
  position: relative;
  display: block;
  width: 46px;
  height: 30px;
  margin: 2px auto 0;
}
.flip-book .fb-base {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 22px;
  border: 1.4px solid var(--accent-deep);
  border-radius: 2px 4px 4px 2px;
  background: linear-gradient(180deg, #FDF6E6, #F6E7CC);
}
.flip-book .fb-base::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1.2px;
  background: rgba(201, 112, 56, .45);
}
.flip-book .fb-page {
  position: absolute;
  left: 7px;
  top: 1px;
  width: 36px;
  height: 19px;
  border: 1px solid rgba(201, 112, 56, .5);
  border-radius: 1px 3px 3px 1px;
  background: #FFFDF8;
  transform-origin: left center;
  animation: fbFlip 1.5s cubic-bezier(.5, .05, .35, 1) infinite;
  backface-visibility: hidden;
}
.flip-book .fb-page.p2 { animation-delay: .5s; }
.flip-book .fb-page.p3 { animation-delay: 1s; }
@keyframes fbFlip {
  0%       { transform: rotateY(0deg); opacity: 1; }
  45%      { opacity: 1; }
  50%      { transform: rotateY(-168deg); opacity: 1; }
  62%, 100%{ transform: rotateY(-168deg); opacity: 0; }
}

/* ---- B6. 猫身边的暖光尘（暗示"在检索"，不用粒子动画库，就几颗静态点缓慢明灭） ---- */
.ai-motes { position: absolute; inset: 0; pointer-events: none; }
.ai-motes i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 200, 110, .85), rgba(230, 200, 110, 0));
  animation: aiMote 3.6s ease-in-out infinite;
}
.ai-motes i:nth-child(1) { left: 18px;  top: 84px; animation-delay: 0s; }
.ai-motes i:nth-child(2) { left: 132px; top: 70px; animation-delay: .9s; }
.ai-motes i:nth-child(3) { left: 34px;  top: 118px; animation-delay: 1.7s; }
.ai-motes i:nth-child(4) { left: 124px; top: 112px; animation-delay: 2.4s; }
@keyframes aiMote {
  0%, 100% { opacity: 0; transform: translateY(4px) scale(.7); }
  50%      { opacity: .9; transform: translateY(-4px) scale(1); }
}

/* ==========================================================================
   C. 思维树的暖光（模块三）
   ========================================================================== */

/* ---- C1. 流动光点：枝干内极淡的金色光点，从根流向叶子 ---- */
/* 独立一层（不复用 .branch，以免和"树枝画入"动画抢 stroke-dashoffset） */
.tree-svg .cy-flow {
  fill: none;
  stroke: var(--gold-soft);                 /* 极淡的金，不用饱和金 */
  stroke-linecap: round;
  stroke-dasharray: .006 .072;              /* pathLength=1 → 光点占 0.6%，间隔 7.2% */
  stroke-opacity: .5;
  animation: cyFlow 4.2s linear infinite;
  pointer-events: none;
}
/* 各层级光点粗细跟着枝干走：主干粗一点，叶子柄最细 */
.tree-svg .cy-flow.f-trunk { stroke-width: 1.9; stroke-dasharray: .007 .066; stroke-opacity: .58; }
.tree-svg .cy-flow.f-type  { stroke-width: 1.4; stroke-dasharray: .008 .074; stroke-opacity: .5; }
.tree-svg .cy-flow.f-grade { stroke-width: 1.1; stroke-dasharray: .01 .082; stroke-opacity: .46; }
.tree-svg .cy-flow.f-leaf  { stroke-width: .9;  stroke-dasharray: .014 .095; stroke-opacity: .4; }
@keyframes cyFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -.082; }         /* 一个周期，方向：根 → 叶 */
}
/* 搜索时只留命中路径的光点 */
.tree-svg.searching .cy-flow:not(.on-path) { stroke-opacity: .1; }

/* ---- C2. 命中发光：被检索到的路径被"阳光"点亮，其余微微变暗 ---- */
.tree-svg .branch.on-path {
  stroke: url(#cySunGrad);
  filter: url(#cySoftGlow);
  animation: cyDraw .95s ease forwards, cySunBreath 2.6s ease-in-out .95s infinite;
}
@keyframes cyDraw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes cySunBreath {
  0%, 100% { stroke-opacity: 1; stroke-width: 2.6; }
  50%      { stroke-opacity: .72; stroke-width: 3.5; }
}
.tree-svg .cy-flow.on-path { stroke: var(--accent-deep); stroke-opacity: 1; }
/* 命中路径上的叶子加一点暖光晕 */
.tree-svg .leaf.hit .sun {
  animation: cyLeafGlow 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes cyLeafGlow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(230, 200, 110, .5)); }
  50%      { filter: drop-shadow(0 0 5px rgba(232, 146, 90, .75)); }
}

/* ---- C3. 树脚下的小猫：坐在树下方留出的地面上，抬头看树 ----
   为什么不直接摆在树根圆旁边：树根那一带的纵向空间被"问题类型"标签占满了
   （标签在 y306~338，土坡在 y380，中间只够 42px），74px 的猫放哪儿都会压住标签。
   所以在 .tree-scroll 底下留一条地面带，猫坐在根的正下方，视觉上就是"坐在树脚下"。 */
.tree-scroll { position: relative; padding-bottom: 70px; }
.tree-cat {
  position: absolute;
  width: 64px;
  height: 64px;
  z-index: 3;
  pointer-events: auto;
  transform-origin: 50% 100%;
}
.tree-cat .cat-svg { width: 64px !important; height: 64px !important; }
/* 猫身下的土坡阴影 */
.tree-cat-shadow {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 52px;
  height: 9px;
  margin-left: -26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(122, 139, 111, .26), rgba(122, 139, 111, 0));
  pointer-events: none;
}
/* 抬头看树：整只猫微微上仰（头部的仰角由 JS 控制 .cat-head 的 translate） */
.tree-cat.look-up { transform: rotate(-1.6deg); }
@media (max-width: 720px) {
  .tree-scroll { padding-bottom: 62px; }
  .tree-cat { width: 56px; height: 56px; }
  .tree-cat .cat-svg { width: 56px !important; height: 56px !important; }
}

/* ==========================================================================
   D. 荧光笔标记：AI 回答里的关键词
   ========================================================================== */
.jn-mark {
  padding: 0 2px;
  border-radius: 3px;
  color: inherit;
  background: linear-gradient(180deg,
    rgba(230, 200, 110, 0) 56%,
    var(--gold-glow) 56%,
    rgba(230, 200, 110, .34) 100%);
  text-shadow: 0 0 6px rgba(230, 200, 110, .45);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.jn-mark.m-grade   { background: linear-gradient(180deg, rgba(232, 146, 90, 0) 56%, rgba(232, 146, 90, .34) 56%, rgba(232, 146, 90, .20) 100%);
                     text-shadow: 0 0 6px var(--warm-glow); }
.jn-mark.m-subject { background: linear-gradient(180deg, rgba(122, 139, 111, 0) 56%, rgba(122, 139, 111, .30) 56%, rgba(122, 139, 111, .16) 100%);
                     text-shadow: 0 0 6px rgba(122, 139, 111, .35); }
.jn-mark.m-measure { background: linear-gradient(180deg, rgba(201, 161, 78, 0) 56%, rgba(201, 161, 78, .36) 56%, rgba(201, 161, 78, .20) 100%);
                     text-shadow: 0 0 6px rgba(201, 161, 78, .42); }

/* 回答出现时淡入（取代转圈：先把内容摆好，再柔和地亮起来） */
.ai-fade-in > * {
  animation: aiFadeUp .5s ease backwards;
}
.ai-fade-in > *:nth-child(2) { animation-delay: .06s; }
.ai-fade-in > *:nth-child(3) { animation-delay: .12s; }
.ai-fade-in > *:nth-child(4) { animation-delay: .18s; }
.ai-fade-in > *:nth-child(5) { animation-delay: .24s; }
.ai-fade-in > *:nth-child(6) { animation-delay: .3s; }
.ai-fade-in > *:nth-child(n+7) { animation-delay: .36s; }
@keyframes aiFadeUp {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* 回答页里"翻完了"的小签条 */
.ai-done-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent-tint);
  border: 1px solid var(--jn-line-soft);
  color: var(--accent-deep);
  font-size: 12px;
  letter-spacing: .5px;
}
.ai-done-tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--warm-glow);
}

/* 复盘对话页里"翻经验册中"的气泡：换成小册子动效 */
.bub.ai.thinking { display: inline-flex; align-items: center; gap: 8px; }
.bub .flip-book.mini { width: 30px; height: 20px; margin: 0; }
.bub .flip-book.mini .fb-base { height: 15px; }
.bub .flip-book.mini .fb-page { left: 5px; top: 1px; width: 23px; height: 12px; }

/* ==========================================================================
   E. 无障碍
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .jn-tape,
  .ai-bubble,
  .wc-ico,
  .flip-book .fb-page,
  .ai-motes i,
  .ai-wait-ground,
  .tree-svg .cy-flow,
  .tree-svg .branch.on-path,
  .tree-svg .leaf.hit .sun,
  .ai-fade-in > * {
    animation: none !important;
    transition: none !important;
  }
  .wc-ico { opacity: .72; }
  .ai-fade-in > * { opacity: 1; transform: none; }
  .tree-svg .cy-flow { stroke-opacity: .35; }
}

/* ==========================================================================
   F. 覆盖既有规则（仅这些地方需要改原有样式，集中在此便于回滚）
   ========================================================================== */

/* F1. 四个功能容器统一套上窗口皮肤
   —— AI 问问题页 / 经验库 / 复盘对话页 / 弹窗（含叶子浮层） */
.ask-input-card,
.tree-card,
.chat-page,
.modal-dialog,
.leaf-pop,
.login-card {
  background: var(--bg-card);
  border: 1.5px solid var(--jn-line);
  border-radius: var(--jn-radius);
  box-shadow: var(--jn-shadow);
}
.tree-card { background: linear-gradient(180deg, #FFFDF8, var(--bg-card)); }

/* 卡片里的次级块统一圆角，语言一致
   —— 注意有些老规则写在 body.page-xxx 下，特异性更高，这里必须跟上同样前缀 */
.advice-block { border-radius: 14px; border-color: var(--jn-line-soft); }
.idea-card { border-radius: 14px; border-color: var(--jn-line-soft); }
.ask-input-card { border-radius: 20px; }
body.page-advice .advice-block {
  border-radius: 14px;
  border-color: var(--jn-line-soft);
}
body.page-advice .advice-block.primary {
  border-color: var(--accent-soft);
  border-left: 3px solid var(--accent);
  overflow: visible;              /* 让右上角的向日葵胶带露出来（原来被 overflow:hidden 裁掉） */
}
body.page-advice .advice-block.evidence { border-color: var(--jn-line-soft); }

/* F2. 弹窗要能露出左上角的胶带：把 overflow 从容器挪到内容区 */
.modal-dialog { overflow: visible; }
.modal-head {
  border-radius: calc(var(--jn-radius) - 1.5px) calc(var(--jn-radius) - 1.5px) 0 0;
}
.modal-foot {
  border-radius: 0 0 calc(var(--jn-radius) - 1.5px) calc(var(--jn-radius) - 1.5px);
}
.modal-body { border-radius: 0; }
.leaf-pop { overflow: visible; padding: 0; }
.leaf-pop-scroll {
  max-height: 86vh;
  overflow-y: auto;
  padding: 20px 20px 26px;
  border-radius: inherit;
}
.leaf-pop .cta-stack { padding: 0; }

/* F3. 复盘对话页：整页当一扇手账窗口 */
.chat-page {
  padding: 14px 14px 16px;
  margin-top: 8px;
}
.chat-top { padding: 0 2px 8px; }

/* F4. 树卡的胶带别压住"全部展开"工具栏 */
.tree-card { padding: 18px 8px 14px; }
.tree-card .tree-tools { margin-top: 2px; }

/* F5. 登录卡沿用同一套语言 */
.login-card { border-radius: var(--jn-radius); }

/* F6. 旧转圈 spinner 保留作为极老浏览器的降级，但默认不再出现在等待页 */
.ai-wait .ask-loading-orb { display: none; }