/* ==========================================================================
   朝阳薪传 v6.4 · 样式
   --------------------------------------------------------------------------
   A. 朝朝 SVG 关节动画（挥手 / 跳跃 / 呼吸 / 表情）
   B. 首页猫头顶的对话气泡
   C. 「猫咪语音对话式复盘」页面
   沿用 style.css 的 CSS 变量，不改动原有文件。
   ========================================================================== */

/* ==========================================================================
   A. 朝朝分层关节动画
   --------------------------------------------------------------------------
   形象固定使用团队指定的那张朝朝原图（assets/cat-photo.png），不重绘。
   做法：同一张图复制若干份，各自 clip-path 裁成一小块，嵌进一组嵌套 transform，
   每层只转一点点、累计成关节式摆动。静���时像素完全重合，看不出接缝。
   几何参数（裁切形状 / 关节位置 / 分块边界）在 cat-geom.css，由原图自动量出。
   ========================================================================== */
.cat-svg {
  display: block;
  position: relative;
  overflow: visible;
  flex: 0 0 auto;                      /* 圆底缩小时宁可溢出，也绝不能被压扁 */
  aspect-ratio: 1 / 1;                 /* 保底：宽高一旦不一致，位图就会被拉变形 */
  transform-origin: 50% 100%;          /* 跳跃的压扁拉伸绕「踩地那条线」发生 */
}
.cat-svg,
.cat-svg * { pointer-events: none; }

/* 圆底随断点变小，猫跟着等比变小（和 v6.3 的 .cat-wave 断点保持一致） */
@media (max-width: 720px) {
  .cat-badge .cat-svg { width: 86px !important; height: 86px !important; }
}
@media (max-width: 380px) {
  .cat-badge .cat-svg { width: 74px !important; height: 74px !important; }
}

/* 每层都是同一张图铺满盒子，靠 clip-path / inset 取自己那一块 */
.cat-svg .cat-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-image: var(--cy-cat-photo);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* 补全图：只盖住手臂/头部原本占的位置，被上面的肢体层压住 */
.cat-svg .cat-gap {
  background-image: var(--cy-cat-gap);
  left: var(--cy-gap-l);
  top: var(--cy-gap-t);
  width: var(--cy-gap-w);
  height: var(--cy-gap-h);
}
.cat-svg .cat-hop,
.cat-svg .cat-arm,
.cat-svg .cat-seg,
.cat-svg .cat-head,
.cat-svg .cat-mouth {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 落地阴影 */
.cat-svg .cat-shadow {
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  width: 46%;
  height: 4.5%;
  margin-left: -23%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(122, 139, 111, .30), rgba(122, 139, 111, 0));
}
.cat-svg .cat-head { transition: translate .35s ease-out; }

/* ---- 常驻：呼吸 ---- */
@keyframes catBreathe {
  0%, 100% { transform: scale3d(1, 1, 1); }
  50%      { transform: scale3d(.99, 1.024, 1); }
}
.cat-svg .cat-hop { transform-origin: 50% 100%; animation: catBreathe 3.4s ease-in-out infinite; }

/* ---- 挥手：手臂绕肩关节，越靠掌侧叠加越多，于是整条臂自然弯曲 ----
   --cy-w 是各层自己的角幅：cat-arm 是整臂刚性摆动，cat-seg1~3 再各叠加一点点 */
.cat-svg .cat-arm,
.cat-svg .cat-seg { --cy-w: 0deg; }
@keyframes catWave {
  0%, 56%, 100% { transform: rotate(0deg); }
  64%           { transform: rotate(calc(-1 * var(--cy-w))); }
  74%           { transform: rotate(calc(.5 * var(--cy-w))); }
  84%           { transform: rotate(calc(-1 * var(--cy-w))); }
  94%           { transform: rotate(0deg); }
}
/* 首次进页面：连挥两下后由 JS 摘掉 cat-intro，回到只呼吸 */
@keyframes catWaveIntro {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(calc(-1 * var(--cy-w))); }
  38%  { transform: rotate(calc(.5 * var(--cy-w))); }
  58%  { transform: rotate(calc(-1 * var(--cy-w))); }
  80%  { transform: rotate(calc(.45 * var(--cy-w))); }
  100% { transform: rotate(0deg); }
}
.cat-svg.cat-mood-wave .cat-arm,
.cat-svg.cat-mood-wave .cat-seg,
.cat-svg.cat-intro .cat-arm,
.cat-svg.cat-intro .cat-seg {
  animation-name: catWave;
  animation-duration: 3.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.cat-svg.cat-mood-wave .cat-arm,
.cat-svg.cat-intro .cat-arm { --cy-w: 8deg; }
.cat-svg.cat-mood-wave .cat-seg,
.cat-svg.cat-intro .cat-seg { --cy-w: 1.5deg; }
.cat-svg.cat-intro .cat-arm,
.cat-svg.cat-intro .cat-seg {
  animation-name: catWaveIntro;
  animation-duration: 1.9s;
  animation-iteration-count: 2;
}
/* hover 时动作幅度加大 */
.cat-cta:hover .cat-svg .cat-arm,
.cat-cta:hover .cat-svg .cat-seg,
.cat-svg.cat-mood-wave:hover .cat-arm,
.cat-svg.cat-mood-wave:hover .cat-seg {
  animation-name: catWave;
  animation-duration: 2.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.cat-cta:hover .cat-svg .cat-arm { --cy-w: 13deg; }
.cat-cta:hover .cat-svg .cat-seg { --cy-w: 2.6deg; }

/* ---- 跳跃：整体位移 + 落地压扁拉伸（squash & stretch） ---- */
@keyframes catHopBody {
  0%   { transform: translateY(0) scale3d(1, 1, 1); }
  14%  { transform: translateY(2.6%) scale3d(1.05, .94, 1); }
  38%  { transform: translateY(-15%) scale3d(.96, 1.06, 1); }
  58%  { transform: translateY(0) scale3d(1, 1, 1); }
  70%  { transform: translateY(1.8%) scale3d(1.07, .93, 1); }
  85%  { transform: translateY(0) scale3d(.99, 1.01, 1); }
  100% { transform: translateY(0) scale3d(1, 1, 1); }
}
@keyframes catHopShadow {
  0%, 58%, 100% { transform: scale3d(1, 1, 1); opacity: 1; }
  38%           { transform: scale3d(.74, .8, 1); opacity: .45; }
}
.cat-svg.cat-hop { animation: catHopBody .92s cubic-bezier(.34, 1.4, .5, 1) 1; }
.cat-svg.cat-hop .cat-shadow { animation: catHopShadow .92s ease-in-out 1; }

/* ---- 头部表情 ---- */
/* 常驻：头部极轻微地动，让静帧也有呼吸感 */
@keyframes catHeadIdle {
  0%, 100% { transform: rotate(-.7deg); }
  50%      { transform: rotate(.8deg); }
}
.cat-svg .cat-head { animation: catHeadIdle 4.2s ease-in-out infinite; }

/* 录音中：耳朵竖起（整头抬起 + 微微前倾） */
@keyframes catListen {
  0%, 100% { transform: translateY(-1.4%) scale3d(.996, 1.018, 1) rotate(-.9deg); }
  50%      { transform: translateY(-2%) scale3d(.996, 1.03, 1) rotate(1.1deg); }
}
.cat-svg.cat-mood-listen .cat-head { animation: catListen 1.5s ease-in-out infinite; }

/* AI 说话：嘴巴开合（绕上唇缩放） */
@keyframes catTalkMouth {
  0%, 100% { transform: scale3d(1, .84, 1); }
  50%      { transform: scale3d(1.05, 1.18, 1); }
}
.cat-svg.cat-mood-speak .cat-mouth { animation: catTalkMouth .42s ease-in-out infinite; }

/* 收到回答：点头两下 */
@keyframes catNod {
  0%, 100% { transform: rotate(0deg); }
  26%      { transform: rotate(2.8deg); }
  52%      { transform: rotate(-.5deg); }
  76%      { transform: rotate(2.2deg); }
}
.cat-svg.cat-mood-nod .cat-head { animation: catNod .9s ease-in-out 2; }

/* 思考：歪头 */
@keyframes catThink {
  0%, 100% { transform: rotate(-2deg) translateY(-.3%); }
  50%      { transform: rotate(2.2deg) translateY(-.3%); }
}
.cat-svg.cat-mood-think .cat-head { animation: catThink 2.6s ease-in-out infinite; }

/* 开心：小幅弹跳 + 挥手 */
@keyframes catJoyHop {
  0%, 100% { transform: translateY(0) scale3d(1, 1, 1); }
  45%      { transform: translateY(-4.5%) scale3d(.99, 1.02, 1); }
  70%      { transform: translateY(0) scale3d(1.02, .98, 1); }
}
.cat-svg.cat-mood-joy .cat-hop { animation-name: catJoyHop; animation-duration: 1.1s; }

/* ---- 尊重系统「减弱动态效果」 ---- */
@media (prefers-reduced-motion: reduce) {
  .cat-svg,
  .cat-svg *,
  .cat-hail,
  .chat-stage .cat-svg * {
    animation: none !important;
    transition: none !important;
    translate: none !important;
  }
}

/* ==========================================================================
   B. 首页：猫头顶飘出的手账风对话气泡
   ========================================================================== */
.cat-hail {
  position: absolute;
  /* 居中在圆底猫徽章上；窄屏时改用左对齐，避免气泡被挤出屏幕左边 */
  --hail-tx: -50%;
  left: calc(var(--cta-pad-l) + var(--badge) / 2);
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: min(320px, 78vw);
  transform: translateX(var(--hail-tx)) rotate(-1.4deg);
  background: var(--bg-card);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(74, 63, 53, .12);
  z-index: 5;
  animation: catHailIn .28s cubic-bezier(.2, 1.5, .4, 1) both;
}
.cat-hail::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--bg-card);
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.cat-hail .hail-act {
  display: inline-block;
  margin-top: 7px;
  padding: 5px 13px;
  font-size: 12.5px;
  color: #fff;
  background: var(--accent-deep);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.cat-hail .hail-act:hover { background: var(--accent); }
@keyframes catHailIn {
  from { opacity: 0; transform: translateX(var(--hail-tx)) rotate(-1.4deg) translateY(6px) scale(.94); }
  to   { opacity: 1; transform: translateX(var(--hail-tx)) rotate(-1.4deg) translateY(0) scale(1); }
}
body.modal-open .cat-hail { display: none; }

/* 窄屏：气泡改成贴着卡片左边，小尾巴仍指向猫 */
@media (max-width: 720px) {
  .cat-hail {
    --hail-tx: 0px;
    left: 2px;
    max-width: min(300px, calc(100vw - 64px));
  }
  .cat-hail::after { left: calc(var(--cta-pad-l) + var(--badge) / 2); }
  .cat-hail .hail-act { margin-top: 6px; }
}

/* ==========================================================================
   C. 猫咪语音对话式复盘
   ========================================================================== */
body.page-review_chat { padding-bottom: 0; overflow: hidden; }

.chat-page {
  max-width: 720px;
  margin: 0 auto;
  height: calc(100dvh - 62px);
  display: flex;
  flex-direction: column;
  padding: 8px 14px 0;
}

/* ---- 顶栏 ---- */
.chat-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px 2px;
}
.chat-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-top .chat-sub {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.chat-top .to-form {
  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 .to-form:hover { color: var(--accent-deep); }

/* ---- 猫咪舞台 ---- */
.chat-stage {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0 4px;
}
.chat-stage .cat-halo {
  position: absolute;
  top: 6px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, #FFFEFB 0%, #FCF5E7 62%, rgba(243, 231, 208, 0) 76%);
  z-index: 0;
}
.chat-stage .cat-svg { position: relative; z-index: 1; }
/* 猫脚下的纸片阴影，压住底部气泡 */
.chat-stage .stage-ground {
  width: 96px;
  height: 10px;
  margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(122, 139, 111, .18), rgba(122, 139, 111, 0) 72%);
}

/* 对话区 + 底部录音区的容器。
   它必须把 flex 链传下去：否则 .chat-log 撑不开，麦克风会紧贴气泡而不是钉在底部 */
#chat-body-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- 对话记录区 ---- */
.chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 2px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.bub {
  position: relative;
  max-width: 84%;
  padding: 11px 15px;
  font-size: 14.5px;
  line-height: 1.62;
  border: 1.5px solid var(--ink-line);
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(74, 63, 53, .06);
  white-space: pre-wrap;
  word-break: break-word;
}
.bub.ai {
  align-self: flex-start;
  transform: rotate(-.5deg);
  background: var(--bg-card);
  border-color: var(--ink-line);
  border-bottom-left-radius: 5px;
}
.bub.me {
  align-self: flex-end;
  transform: rotate(.4deg);
  background: var(--accent-tint);
  border-color: var(--accent-soft);
  color: var(--tertiary-deep);
  border-bottom-right-radius: 5px;
}
.bub.sys {
  align-self: center;
  transform: none;
  max-width: 92%;
  background: transparent;
  border-style: dashed;
  border-color: var(--line-dashed);
  color: var(--ink-soft);
  font-size: 12.5px;
  text-align: center;
  box-shadow: none;
}
.bub .bub-who {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.bub.ai::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 9px;
  width: 11px;
  height: 11px;
  background: var(--bg-card);
  border-left: 1.5px solid var(--ink-line);
  border-bottom: 1.5px solid var(--ink-line);
  transform: rotate(45deg);
  border-bottom-left-radius: 2px;
}
.bub.me::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: 9px;
  width: 11px;
  height: 11px;
  background: var(--accent-tint);
  border-right: 1.5px solid var(--accent-soft);
  border-bottom: 1.5px solid var(--accent-soft);
  transform: rotate(45deg);
  border-bottom-right-radius: 2px;
}
/* 回答出现时淡入 */
.bub.in { animation: bubFadeIn .42s ease-out both; }
@keyframes bubFadeIn {
  from { opacity: 0; transform: translateY(8px) rotate(-.5deg); }
  to   { opacity: 1; }
}

/* AI 思考中：三点闪烁 + 小字（不转圈） */
.bub.thinking { color: var(--ink-soft); }
.bub.thinking .dots i {
  display: inline-block;
  width: 5px; height: 5px;
  margin: 0 2px;
  border-radius: 50%;
  background: var(--accent);
  animation: bubDot 1.1s ease-in-out infinite;
}
.bub.thinking .dots i:nth-child(2) { animation-delay: .16s; }
.bub.thinking .dots i:nth-child(3) { animation-delay: .32s; }
@keyframes bubDot {
  0%, 100% { opacity: .28; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}

/* 关键词荧光笔（供后续「暖光语言」模块复用） */
.hl {
  background: linear-gradient(180deg, transparent 56%, rgba(230, 200, 110, .55) 56%);
  border-radius: 3px;
  padding: 0 2px;
  box-shadow: 0 0 8px rgba(230, 200, 110, .35);
}

/* ---- 底部：录音区 ---- */
.chat-composer {
  flex: 0 0 auto;
  padding: 8px 0 calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(250, 246, 238, 0), var(--bg) 42%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.chat-composer .mic-hint {
  font-size: 12px;
  color: var(--ink-faint);
  min-height: 17px;
  text-align: center;
}
.chat-composer .mic-hint.live { color: var(--accent-deep); }

.mic-big {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid var(--accent-deep);
  background: radial-gradient(circle at 50% 34%, #F6A96B 0%, var(--accent) 58%, var(--accent-deep) 100%);
  color: #FFF8EF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(201, 112, 56, .34), inset 0 -4px 10px rgba(201, 112, 56, .3);
  transition: transform .16s ease, box-shadow .16s ease;
}
.mic-big:hover { transform: translateY(-2px); }
.mic-big:active { transform: translateY(0) scale(.97); }
.mic-big.recording {
  background: radial-gradient(circle at 50% 34%, #E8845A 0%, #C9552F 60%, #A9431F 100%);
}
.mic-big.recording::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(201, 112, 56, .5);
  animation: micPulse 1.5s ease-out infinite;
}
@keyframes micPulse {
  0%   { transform: scale(.92); opacity: .85; }
  100% { transform: scale(1.28); opacity: 0; }
}
.mic-big[aria-disabled="true"] { filter: grayscale(.4); opacity: .7; }
.mic-big .mic-ico { width: 27px; height: 27px; }
.mic-big .mic-stop { width: 20px; height: 20px; border-radius: 5px; background: #FFF8EF; }

.chat-composer .fallback-input {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}
.chat-composer .fallback-input textarea {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 110px;
  resize: none;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg-card);
  border: 1.5px solid var(--ink-line);
  border-radius: 14px;
  outline: none;
}
.chat-composer .fallback-input textarea:focus { border-color: var(--accent); }
.chat-composer .fallback-input button {
  flex: 0 0 auto;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14px;
  color: #fff;
  background: var(--accent-deep);
  border: none;
  border-radius: 14px;
  cursor: pointer;
}
.chat-composer .fallback-input button:hover { background: var(--accent); }

.chat-end-btn {
  margin-top: 2px;
  padding: 6px 18px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--tertiary-deep);
  background: var(--bg-card);
  border: 1.5px solid var(--ink-line);
  border-radius: 999px;
  cursor: pointer;
}
.chat-end-btn:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ---- 结束后的识别确认（复用 v63 的 chip 皮肤，改到页面内呈现） ---- */
.chat-confirm {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 2px 14px;
}

/* ---- 窄屏微调 ---- */
@media (max-width: 480px) {
  .chat-page { padding: 6px 12px 0; }
  .chat-stage .cat-svg { width: 104px !important; height: 104px !important; }
  .bub { max-width: 88%; font-size: 14px; }
}

/* ==========================================================================
   D. 旧组件适配新猫咪 / 小向日葵
   ========================================================================== */
/* 首页 CTA 的猫自带落地阴影，去掉 v6.3 那层 CSS 阴影，避免双重投影 */
.cat-cta .cat-badge::before { display: none; }
.cat-cta .cat-badge { overflow: visible; }

/* 对话气泡的定位锚点：正好套在圆底猫徽章上（尺寸随断点走） */
.cat-cta-wrap { position: relative; --badge: 112px; --cta-pad-l: 16px; --cta-pad-t: 16px; }
.cat-hail-anchor {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--cta-pad-t);
  height: var(--badge);
  pointer-events: none;
}
.cat-hail { display: none; pointer-events: auto; }
.cat-cta-wrap.hail-open .cat-hail { display: block; }
@media (max-width: 720px) {
  .cat-cta-wrap { --badge: 92px; --cta-pad-l: 12px; --cta-pad-t: 14px; }
}
@media (max-width: 380px) {
  .cat-cta-wrap { --badge: 80px; --cta-pad-l: 12px; --cta-pad-t: 14px; }
  .cat-hail { font-size: 12.5px; }
}

/* 复盘弹窗头部的小猫 */
.modal-head-cat .cat-svg { display: block; }
.modal-head-cat { overflow: visible; }
/* AI 追问气泡里的小猫头像 */
.fu-avatar .cat-svg { display: block; width: 100% !important; height: 100% !important; margin-top: 1px; }

/* 空库按钮与小向日葵 */
.sapling-ico { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
.sapling-ico .sunflower { display: block; }

/* 叶子详情浮层头部的向日葵徽章 */
.leaf-pop-badge {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, #FFFEFB, #F7ECD8);
  border: 1px solid #F2E5CD;
}
.leaf-pop-badge .sunflower { display: block; }

/* 识别确认里「未提到，已留空」弱化显示 */
.chat-confirm .recog-advice.empty .na { color: var(--ink-faint); font-style: italic; }
.chat-confirm .recog-advice { margin-bottom: 10px; }