/* ==================================================================
 * theme-motion.css —— 动效 Token 层 + 加载动画组件库
 * ------------------------------------------------------------------
 * 定位（方案 A「类复用、零侵入」的落地文件）：
 *   1. 动效 Token：时长/缓动/步长，三主题共用；某主题想改节奏，只需在
 *      theme-XXX.css 里加 html[data-theme="x"]{--kf-dur:...} 覆盖，
 *      本文件不用动。
 *   2. 加载动画组件库：8 个 .kf-loading-* 类，颜色全部走
 *      var(--brand) / var(--c-violet) / var(--brand-bg)，
 *      即自动跟随 light / dark / lilac 三套主题换肤，零硬编码。
 *   3. 场景融合小组件：.kf-fade-in / .kf-stagger / .kf-press /
 *      .kf-hover-lift，让面板、列表、按钮「活」起来。
 *
 * ⚠️ 遵守平台铁律：不动 app.css / theme.js / nav.js；
 *    本文件只做「纯追加」，随时删掉 <link> 即整体回退。
 *
 * 加载位置：必须在 app.css 之后（消费 :root 与主题块的 token）。
 *
 * 用法速查：
 *   旋转圆环   <div class="kf-loading-ring"></div>
 *   脉冲圆点   <div class="kf-loading-pulse"></div>
 *   弹跳柱条   <div class="kf-loading-bars"><span style="--d:0"></span>×5</div>
 *   波纹圆圈   <div class="kf-loading-ripple"><span></span><span></span></div>
 *   锥形旋转器 <div class="kf-loading-conic"></div>
 *   打字指示器 <div class="kf-loading-typing"><span></span>×3</div>
 *   骨架屏微光 <div class="kf-loading-skeleton" style="width:120px"></div>
 *   DNA 双螺旋 <div class="kf-loading-dna"><span class="a" style="--d:0"></span>
 *              …8 个 a 链 --d:0~7 … 8 个 b 链 --d:8~15</div>
 * ================================================================== */

/* ------------------------------------------------------------------
 * 一、动效 Token（三主题共用）
 * ------------------------------------------------------------------ */
:root{
  --kf-dur-fast:.18s;                          /* 微交互：按钮态、chip 选中 */
  --kf-dur:.32s;                               /* 常规过渡：面板、弹层 */
  --kf-dur-slow:.6s;                           /* 大件：卡片入场、转场 */
  --kf-ease-out:cubic-bezier(0.22,1,.36,1);    /* 入场：快出缓停 */
  --kf-ease-in-out:cubic-bezier(.45,0,.55,1);  /* 屏内循环运动 */
  --kf-stagger:70ms;                           /* 列表错峰步长 */
  /* 骨架屏高光：默认（浅色家族）强高光；dark 主题弱化，避免过亮 */
  --kf-sheen:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
}
html[data-theme="dark"]{
  --kf-sheen:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.10) 50%,transparent 100%);
}
html[data-theme="lilac"]{
  --kf-sheen:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.85) 50%,transparent 100%);
}

/* ------------------------------------------------------------------
 * 二、加载动画组件库（8 款，颜色全部走主题 token）
 * ------------------------------------------------------------------ */

/* 1. 旋转圆环 —— 最常用：表格/面板数据加载 */
.kf-loading-ring{
  width:40px;height:40px;border-radius:50%;
  border:4px solid var(--brand-bd,rgba(99,102,241,.18));
  border-top-color:var(--brand,#6366F1);
  animation:kf-ring-spin .9s linear infinite;
}
@keyframes kf-ring-spin{to{transform:rotate(360deg)}}

/* 2. 脉冲圆点 —— 双圈扩散：轻提示、徽标加载态 */
.kf-loading-pulse{position:relative;width:40px;height:40px}
.kf-loading-pulse::before,.kf-loading-pulse::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--brand,#6366F1);opacity:.6;
  animation:kf-pulse 1.4s var(--kf-ease-in-out) infinite;
}
.kf-loading-pulse::after{animation-delay:-.7s}
@keyframes kf-pulse{
  0%{transform:scale(.3);opacity:.7}
  70%{transform:scale(1);opacity:0}
  100%{transform:scale(1);opacity:0}
}

/* 3. 弹跳柱条 —— 5 柱，子 span 用 --d:0~4 设延迟步长 .1s */
.kf-loading-bars{display:flex;align-items:flex-end;gap:5px;height:36px}
.kf-loading-bars span{
  width:6px;height:100%;border-radius:3px;transform-origin:bottom center;
  background:linear-gradient(180deg,var(--c-violet,#8B5CF6),var(--brand,#6366F1));
  animation:kf-bars-jump 1s var(--kf-ease-in-out) infinite;
  animation-delay:calc(var(--d,0) * .1s);
}
@keyframes kf-bars-jump{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* 4. 波纹圆圈 —— 双环外扩：全屏/区块遮罩 */
.kf-loading-ripple{position:relative;width:44px;height:44px}
.kf-loading-ripple span{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid var(--brand,#6366F1);opacity:0;
  animation:kf-ripple 1.6s var(--kf-ease-out) infinite;
}
.kf-loading-ripple span:nth-child(2){animation-delay:-.8s}
@keyframes kf-ripple{0%{transform:scale(.2);opacity:1}100%{transform:scale(1);opacity:0}}

/* 5. 渐变锥形旋转器 —— conic + mask 裁圆环 */
.kf-loading-conic{
  width:44px;height:44px;border-radius:50%;
  background:conic-gradient(from 90deg,transparent 0%,var(--brand,#6366F1) 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  animation:kf-conic-spin 1s linear infinite;
}
@keyframes kf-conic-spin{to{transform:rotate(360deg)}}

/* 6. 打字指示器 —— 三点跳动：消息发送中、AI 思考中 */
.kf-loading-typing{display:flex;align-items:center;gap:5px}
.kf-loading-typing span{
  width:8px;height:8px;border-radius:50%;
  background:var(--brand,#6366F1);
  animation:kf-typing 1.2s var(--kf-ease-in-out) infinite;
}
.kf-loading-typing span:nth-child(2){animation-delay:.15s}
.kf-loading-typing span:nth-child(3){animation-delay:.3s}
@keyframes kf-typing{
  0%,60%,100%{transform:translateY(0);opacity:.55}
  30%{transform:translateY(-7px);opacity:1}
}

/* 7. 骨架屏微光 —— ::after 高光横扫（仅 transform，不碰 background-position） */
.kf-loading-skeleton{
  position:relative;overflow:hidden;border-radius:8px;min-height:14px;
  background:var(--brand-bg,rgba(99,102,241,.08));
}
.kf-loading-skeleton::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:var(--kf-sheen);opacity:.55;
  animation:kf-skeleton-sheen 1.5s var(--kf-ease-in-out) infinite;
}
@keyframes kf-skeleton-sheen{100%{transform:translateX(100%)}}

/* 8. DNA 双螺旋 —— 16 球双链，子 span 用 --d:0~15 设延迟步长 -.25s；
      a 链（--d:0~7）主色，b 链（--d:8~15）辅色（加 class="b"） */
.kf-loading-dna{position:relative;width:40px;height:52px}
.kf-loading-dna span{
  position:absolute;top:0;left:50%;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--brand,#6366F1);
  animation:kf-dna-twist 2s linear infinite;
  animation-delay:calc(var(--d,0) * -.25s);
}
.kf-loading-dna span.b{background:var(--c-violet,#8B5CF6)}
@keyframes kf-dna-twist{
  0%{transform:translate(0,0) scale(.4);opacity:0}
  10%{transform:translate(0,5px) scale(1);opacity:1}
  25%{transform:translate(15px,12px) scale(.55);opacity:.55}
  50%{transform:translate(0,24px) scale(1);opacity:1}
  75%{transform:translate(-15px,36px) scale(.55);opacity:.55}
  90%{transform:translate(0,43px) scale(1);opacity:1}
  100%{transform:translate(0,47px) scale(.4);opacity:0}
}

/* ------------------------------------------------------------------
 * 三、场景融合小组件（让平台整体更生动）
 * ------------------------------------------------------------------ */

/* 元素入场淡入 */
.kf-fade-in{animation:kf-fade-in var(--kf-dur-slow) var(--kf-ease-out) backwards}
@keyframes kf-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 列表/卡片容器错峰入场：子元素依次浮入（最多 12 个，超出部分无延迟） */
.kf-stagger > *{animation:kf-card-in .5s var(--kf-ease-out) backwards}
.kf-stagger > *:nth-child(1){animation-delay:calc(0 * var(--kf-stagger))}
.kf-stagger > *:nth-child(2){animation-delay:calc(1 * var(--kf-stagger))}
.kf-stagger > *:nth-child(3){animation-delay:calc(2 * var(--kf-stagger))}
.kf-stagger > *:nth-child(4){animation-delay:calc(3 * var(--kf-stagger))}
.kf-stagger > *:nth-child(5){animation-delay:calc(4 * var(--kf-stagger))}
.kf-stagger > *:nth-child(6){animation-delay:calc(5 * var(--kf-stagger))}
.kf-stagger > *:nth-child(7){animation-delay:calc(6 * var(--kf-stagger))}
.kf-stagger > *:nth-child(8){animation-delay:calc(7 * var(--kf-stagger))}
.kf-stagger > *:nth-child(9){animation-delay:calc(8 * var(--kf-stagger))}
.kf-stagger > *:nth-child(10){animation-delay:calc(9 * var(--kf-stagger))}
.kf-stagger > *:nth-child(11){animation-delay:calc(10 * var(--kf-stagger))}
.kf-stagger > *:nth-child(12){animation-delay:calc(11 * var(--kf-stagger))}
@keyframes kf-card-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 按钮按压缩放 */
.kf-press{transition:transform var(--kf-dur-fast) var(--kf-ease-out)}
.kf-press:active{transform:scale(.96)}

/* 卡片悬停微浮起（阴影沿用平台 --sh-md token） */
.kf-hover-lift{transition:transform var(--kf-dur) var(--kf-ease-out),box-shadow var(--kf-dur) var(--kf-ease-out)}
.kf-hover-lift:hover{transform:translateY(-3px);box-shadow:var(--sh-md,0 6px 16px rgba(0,0,0,.12))}

/* ------------------------------------------------------------------
 * 四、全局交互动效层（直接增强平台现有元素，纯 CSS、零 HTML/JS 改动）
 * ------------------------------------------------------------------
 * 设计约束（「不影响原有功能」的三条保险）：
 *   1. 按压缩放一律用 CSS 独立属性 scale（与 transform 叠加而非替换）——
 *      平台里 .toast/.greet 等用 translateX(-50%) 居中的元素绝不被破坏；
 *   2. 不覆盖任何平台已有的 transition（.btn 的 all .15s / .sbtn 的 .12s /
 *      .v2btn 的 120ms 全部原样保留），只给没有过渡的元素补；
 *   3. 所有动画走 var(--kf-*) token，三主题自动换肤；
 *      app.css 的全局 prefers-reduced-motion 降级 + 本文件第四节双兜底。
 *
 * 生效原理：本文件在 app.css 之后加载，同特异性选择器后来者胜出，
 *   因此这里对 .btn:active / .toast.show 等的增强会覆盖 app.css 的同名规则；
 *   删掉 <link> 即整体回退，平台样式一秒还原。
 * ------------------------------------------------------------------ */

/* 5.1 按钮按压反馈 —— 全站按钮/图标按钮/分段控件，点下去的瞬间「陷一下」 */
.btn:active,.sbtn:active,.v2btn:active,.yh-tab:active,.seg button:active,
.chap-tab:active,.rchip:active,.sd-i:active{scale:.94;}
/* 小图标按钮悬停轻微放大（.sbtn/.sd-i 无 transform 用途，安全） */
.sbtn:hover,.sd-i:hover{scale:1.08;}

/* 5.2 toast 弹性进场 —— 保留 translateX(-50%) 居中分量，播完交还样式表值 */
@keyframes kf-toast-in{
  0%{opacity:0;transform:translateX(-50%) translateY(20px) scale(.9)}
  55%{opacity:1;transform:translateX(-50%) translateY(-3px) scale(1.05)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
.toast.show{animation:kf-toast-in .34s var(--kf-ease-out);}
/* 问候横幅（.greet）同机制：平台原有的 cubic-bezier(.2,.9,.3,1.1) 弹性语言 */
@keyframes kf-greet-in{
  0%{opacity:0;transform:translateX(-50%) translateY(-22px) scale(.94)}
  60%{opacity:1;transform:translateX(-50%) translateY(2px) scale(1.02)}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
.greet.show{animation:kf-greet-in .38s cubic-bezier(.2,.9,.3,1.1);}

/* 5.3 分段控件 / 页签选中弹跳 —— 切视图时目标「弹一下」，位置感明确 */
@keyframes kf-tab-pop{
  0%{transform:scale(1)}
  40%{transform:scale(1.09)}
  100%{transform:scale(1)}
}
.seg button.on,.yh-tab.on,.chap-tab.on{animation:kf-tab-pop .3s var(--kf-ease-out);}

/* 5.4 卡片悬停微浮起 —— .card 原无 transition/transform，补齐过渡后抬升 2px；
       阴影走平台 --sh-md token，三主题一致 */
.card{transition:transform var(--kf-dur) var(--kf-ease-out),box-shadow var(--kf-dur) var(--kf-ease-out);}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-md,0 6px 16px rgba(0,0,0,.12));}
/* v2 卡片体系（body.v2 下的 --v2-* token）同步抬升，阴影用 v2 变量 */
body.v2 .v2card{transition:transform var(--kf-dur) var(--kf-ease-out),box-shadow var(--kf-dur) var(--kf-ease-out);}
body.v2 .v2card:hover{transform:translateY(-2px);box-shadow:var(--v2-sh-md,0 6px 16px rgba(0,0,0,.12));}

/* 5.5 主题切换平滑 —— 切浅色/深色/暖紫时，页面底色与文字色渐变过渡
       （只加在 body 上，不碰任何组件的私有 transition） */
body{transition:background-color .3s var(--kf-ease-out),color .3s var(--kf-ease-out);}

/* 5.6 忙碌状态脉冲点 —— .status.busy 文字前一枚呼吸圆点（如顶栏「加载中…」）。
       注意：不改父级 display（.status 原为块级，改 inline-flex 会破坏布局），
       圆点用 inline-block + vertical-align 对齐 */
.status.busy::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:6px;vertical-align:middle;
  background:var(--warn,#f59e0b);
  animation:kf-dot-breathe 1.2s var(--kf-ease-in-out) infinite;
}
@keyframes kf-dot-breathe{
  0%,100%{transform:scale(.6);opacity:.5}
  50%{transform:scale(1);opacity:1}
}

/* ------------------------------------------------------------------
 * 五、无障碍降级：用户系统开启「减弱动态效果」时全部停掉
 *    （app.css 已有全局 !important 双保险，这里按组件再兜一层）
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .kf-loading-ring,.kf-loading-pulse,.kf-loading-pulse::before,.kf-loading-pulse::after,
  .kf-loading-bars span,.kf-loading-ripple span,.kf-loading-conic,
  .kf-loading-typing span,.kf-loading-skeleton,.kf-loading-skeleton::after,
  .kf-loading-dna span{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  .kf-fade-in,.kf-stagger > *{animation:none !important}
  .kf-press,.kf-hover-lift{transition:none !important}
  .kf-hover-lift:hover{transform:none !important}
  /* 全局交互动效层降级 */
  .toast.show,.greet.show,
  .seg button.on,.yh-tab.on,.chap-tab.on,
  .status.busy::before{animation:none !important}
  .btn:active,.sbtn:active,.v2btn:active,.yh-tab:active,.seg button:active,
  .chap-tab:active,.rchip:active,.sd-i:active,
  .sbtn:hover,.sd-i:hover{scale:1 !important}
  .card,body.v2 .v2card,body{transition:none !important}
  .card:hover,body.v2 .v2card:hover{transform:none !important}
}