/* 动效层：在玻璃层之后加载，只加“活气”，不改布局。
   原则：
   1. 默认可用，prefers-reduced-motion 时全部关掉；
   2. 动画只用 transform/opacity，不触发重排；
   3. 入场用 backwards，结束后不残留 transform（否则会生成层叠上下文，
      把弹层/抽屉压在导航下面——glass.css 里踩过）。 */

:root {
  --mv-fast: .16s;
  --mv: .26s;
  --mv-slow: .5s;
  --mv-ease: cubic-bezier(.22, .7, .2, 1);
}

/* ── 1. 所有可点元素：按压回弹 ─────────────────────────────────────── */
button, .btn, .rail-link, .quick a, .quick button, .all-tools, .suggest-chip,
.lp-row, .lp-account, .lp-tool, .mine-row, .mine-card, .thread-item, .bn-item,
.auth-tab, .auth-send, .tool-btn, .chip, .filter, .lp-chip, .pref-chip {
  transition: transform var(--mv-fast) var(--mv-ease), background-color .2s ease,
    color .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}

button:active, .btn:active, .quick a:active, .quick button:active,
.all-tools:active, .suggest-chip:active, .lp-row:active, .lp-account:active,
.lp-tool:active, .mine-row:active, .thread-item:active, .auth-tab:active,
.tool-btn:active, .filter:active, .lp-chip:active {
  transform: scale(.975);
  transition-duration: .06s;
}

/* 列表行：悬停时轻微右移 + 抬底 */
.lp-row:hover, .lp-account:hover, .lp-tool:hover, .mine-row:hover,
.thread-item:hover, .content-row:hover {
  transform: translateX(2px);
}

/* ── 2. 左侧栏：选中条长出来、圆点呼吸 ─────────────────────────────── */
.rail-link.on::before {
  animation: bar-grow .28s var(--mv-ease) backwards;
  transform-origin: top;
}

.rail-link .dot { transition: transform .2s var(--mv-ease), opacity .2s ease; }
.rail-link:hover .dot { transform: scale(1.5); opacity: .9; }
.rail-link.on .dot { animation: dot-breathe 2.6s ease-in-out infinite; }

@keyframes bar-grow {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes dot-breathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.45); opacity: .55; }
}

/* ── 3. 底部导航：圆球呼吸、点击回弹 ───────────────────────────────── */
.bn-item svg { transition: transform var(--mv-fast) var(--mv-ease); }
.bn-item:active svg { transform: scale(.86); }
.bn-center.on .bn-orb { animation: orb-float 3.4s ease-in-out infinite; }

@keyframes orb-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.025); }
}

/* ── 4. 顶栏：滚动后加一层浮起 ─────────────────────────────────────── */
.topbar { transition: box-shadow .25s ease, background-color .25s ease; }
.topbar.is-scrolled { box-shadow: 0 10px 30px rgba(20, 20, 18, .07); background: rgba(255, 255, 255, .9) !important; }

/* ── 5. 首页 hero：光斑跟着鼠标走 ──────────────────────────────────── */
body[data-page="home"] .page-head { --mx: 82%; --my: 8%; }
body[data-page="home"] .page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255, 255, 255, .14), transparent 68%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
body[data-page="home"] .page-head:hover::before { opacity: 1; }

/* ── 6. 图表：柱子和横条从 0 长出来 ────────────────────────────────── */
.vbar {
  transform-origin: bottom;
  animation: bar-rise .7s var(--mv-ease) backwards;
}
.vbar-wrap:nth-child(2) .vbar { animation-delay: .05s; }
.vbar-wrap:nth-child(3) .vbar { animation-delay: .1s; }
.vbar-wrap:nth-child(4) .vbar { animation-delay: .15s; }
.vbar-wrap:nth-child(5) .vbar { animation-delay: .2s; }
.vbar-wrap:nth-child(6) .vbar { animation-delay: .25s; }
.vbar-wrap:nth-child(7) .vbar { animation-delay: .3s; }

.hfill {
  transform-origin: left;
  animation: fill-grow .75s var(--mv-ease) backwards;
}
.hrow:nth-child(2) .hfill { animation-delay: .06s; }
.hrow:nth-child(3) .hfill { animation-delay: .12s; }
.hrow:nth-child(4) .hfill { animation-delay: .18s; }
.hrow:nth-child(5) .hfill { animation-delay: .24s; }

@keyframes bar-rise {
  from { transform: scaleY(0); opacity: .2; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes fill-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── 7. 滚动入场（由 motion.js 加 .rv）────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--mv-slow) var(--mv-ease), transform var(--mv-slow) var(--mv-ease);
  transition-delay: var(--rv-delay, 0ms);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; will-change: auto; }

/* 同一排的子项错峰出现 */
.rv:nth-child(2) { --rv-delay: 45ms; }
.rv:nth-child(3) { --rv-delay: 90ms; }
.rv:nth-child(4) { --rv-delay: 135ms; }
.rv:nth-child(5) { --rv-delay: 180ms; }
.rv:nth-child(6) { --rv-delay: 225ms; }

/* ── 8. 弹层：背景淡入、内容弹起；抽屉里的行错峰滑入 ───────────────── */
.modal-back.open { animation: fade-in .22s ease backwards; }
.modal-back.open .modal { animation: pop-in .26s var(--mv-ease) backwards; }

.threads.open .thread-item { animation: slide-in .3s var(--mv-ease) backwards; }
.threads.open .thread-item:nth-child(2) { animation-delay: .03s; }
.threads.open .thread-item:nth-child(3) { animation-delay: .06s; }
.threads.open .thread-item:nth-child(4) { animation-delay: .09s; }
.threads.open .thread-item:nth-child(5) { animation-delay: .12s; }
.threads.open .thread-item:nth-child(6) { animation-delay: .15s; }

.chat-card { animation: card-pop .3s var(--mv-ease) backwards; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes card-pop {
  from { opacity: 0; transform: translateY(8px) scale(.994); }
  to { opacity: 1; transform: none; }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* ── 9. 登录：卡片弹入、分段滑块、输入聚焦光圈 ─────────────────────── */
.auth-card { animation: pop-in .5s var(--mv-ease) backwards; }
.auth-tab.on { animation: tab-in .22s var(--mv-ease) backwards; }
@keyframes tab-in {
  from { transform: scale(.94); }
  to { transform: scale(1); }
}
.auth-field input:focus, .threads-search:focus, .lp-search:focus {
  box-shadow: 0 0 0 4px rgba(20, 20, 18, .06);
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* ── 10. 数字：滚动计数时用等宽数字，避免宽度抖动 ─────────────────── */
.counting, .cc-kpi-num { font-variant-numeric: tabular-nums; transition: none; }

/* 会话里的经营卡、弹层时间线：逐条亮起 */
.modal-back.open .lp-tl-item { animation: slide-in .28s var(--mv-ease) backwards; }
.modal-back.open .lp-tl-item:nth-child(2) { animation-delay: .05s; }
.modal-back.open .lp-tl-item:nth-child(3) { animation-delay: .1s; }
.modal-back.open .lp-tl-item:nth-child(4) { animation-delay: .15s; }
.modal-back.open .modal-actions { animation: fade-in .3s ease .08s backwards; }

/* 会话右上角「操作」菜单 */
.thread-menu { animation: pop-in .18s var(--mv-ease) backwards; }

/* 底部导航选中项：图标轻轻上浮 */
.bn-item.on svg { transform: translateY(-1px); }

/* ── 11. 正在输入的三点 ────────────────────────────────────────────── */
.typing i { animation: dot-jump 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .14s; }
.typing i:nth-child(3) { animation-delay: .28s; }

@keyframes dot-jump {
  0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* ── 12. 减少动态偏好：全关 ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .page-head::before { display: none; }
}