/* ============================================================
   jida-motion.css — 高质感信息流动效层（加性，全站可注入）
   设计基准：1%~3% 微色阶分层 / 8pt 网格 / 暗色降字重 /
             等宽数字 / 防孤行 / Q 弹回弹 / 水墨晕染打字
   命名统一 m- 前缀，与 app.css / jida-neo*.css 不冲突。
   ============================================================ */

:root {
  /* ---- 8pt 网格：唯一合法刻度 ---- */
  --m-s1: 8px;  --m-s2: 16px; --m-s3: 24px; --m-s4: 32px;
  --m-s5: 40px; --m-s6: 48px; --m-s7: 56px; --m-s8: 64px;

  /* ---- 1%~3% 微色阶：只用透明度分层，绝不使用粗黑框 ---- */
  --m-t1: rgba(25, 21, 18, 0.010);
  --m-t2: rgba(25, 21, 18, 0.020);
  --m-t3: rgba(25, 21, 18, 0.030);
  --m-edge: rgba(25, 21, 18, 0.028);
  --m-hair: rgba(25, 21, 18, 0.045);
  --m-lift: rgba(255, 255, 255, 0.72);
  --m-ph: #EDE7DA;                 /* 图片同色调模糊占位 */
  --m-dot: rgba(25, 21, 18, 0.32);
  --m-ink-soft: rgba(25, 21, 18, 0.55);

  /* ---- 动效曲线：干脆跟手 + Q 弹回弹 ---- */
  --m-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --m-snap: cubic-bezier(0.20, 0.90, 0.25, 1);
  --m-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* 暗色模式：微色阶换成白色 1%~3%，字重由 JS 自动降一档 */
html[data-neo-theme="dark"] {
  --m-t1: rgba(255, 255, 255, 0.010);
  --m-t2: rgba(255, 255, 255, 0.020);
  --m-t3: rgba(255, 255, 255, 0.030);
  --m-edge: rgba(255, 255, 255, 0.030);
  --m-hair: rgba(255, 255, 255, 0.055);
  --m-lift: rgba(255, 255, 255, 0.055);
  --m-ph: #17161A;
  --m-dot: rgba(255, 255, 255, 0.42);
  --m-ink-soft: rgba(255, 255, 255, 0.58);
}

/* ============ 01 微色阶分层：不用粗黑框 ============
   用极淡的纵向色阶 + 发丝边，靠 1%~3% 明度差拉层级。 */
.card,
.chat-item,
.notice-item,
.msg-bubble,
.official-entry,
.cpanel,
.pick-panel {
  /* 只把描边压到 1%~3% 发丝级，柔光长投影交还原有的 neo 层，不覆盖 */
  border-color: var(--m-edge) !important;
}
.card,
.chat-item,
.notice-item,
.official-entry {
  background-image: linear-gradient(180deg, var(--m-t1), rgba(0, 0, 0, 0) 62%);
}
.msg-bubble {
  background-image: linear-gradient(180deg, var(--m-t2), rgba(0, 0, 0, 0) 70%);
}
/* 面板：1%~3% 磨砂层，靠色阶而非描边区分 */
.cpanel,
.pick-panel {
  background-image: linear-gradient(180deg, var(--m-t2), var(--m-t1));
}
/* 任何实心深色描边统一淡化为发丝边 */
.micro-edge,
.m-head,
.cinput-bar,
.chead2,
.msticky {
  border-color: var(--m-hair) !important;
}

/* ============ 02 暗色模式自动降字重 ============
   JS 扫描 computed font-weight >= 600 的文本节点宿主并挂类，
   关闭主题时移除类即还原，不写死任何 inline 字重。 */
.m-w-lite  { font-weight: 400 !important; }
.m-w-lite2 { font-weight: 500 !important; }
html[data-neo-theme="dark"] .m-auto-w { font-synthesis: none; }

/* ============ 03 等宽数字防抖动 ============ */
.m-tnum {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-family: var(--m-mono);
  letter-spacing: 0;
  white-space: nowrap;
}
/* 计数/角标固定最小宽度，位数变化不推挤布局 */
.m-tnum--fixed { display: inline-block; min-width: 2.4ch; text-align: center; }

/* ============ 04 防孤行排版 ============ */
.m-pretty,
.msg-bubble,
.chat-last,
.ni-content,
.card p,
.article-body {
  text-wrap: pretty;
  orphans: 2;
  widows: 2;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  hanging-punctuation: allow-end last;
}

/* ============ 05 Q 弹回弹 + 干脆拖拽 ============ */
.m-q {
  transition: transform 0.46s var(--m-spring),
              box-shadow 0.30s var(--m-ease),
              opacity 0.22s linear;
}
.m-q.is-press {
  transform: scale(0.962);
  transition-duration: 0.09s;
  transition-timing-function: var(--m-snap);
}
.m-q.is-drag {
  transition: none;              /* 拖拽时零延迟跟手 */
  cursor: grabbing;
}
.m-q.is-release {
  transition: transform 0.52s var(--m-spring);
}
.m-q.is-press > .msg-bubble,
.m-q.is-press > .card { box-shadow: inset 0 2px 6px var(--m-t3); }

/* ============ 06 水墨晕染打字（高斯模糊错峰） ============ */
.m-ink {
  display: inline;
  opacity: 0;
  filter: blur(9px);
  transform: translateY(3px) scale(1.012);
  animation: m-ink-in 0.66s var(--m-ease) forwards;
  animation-delay: var(--m-d, 0ms);
}
@keyframes m-ink-in {
  0%   { opacity: 0;    filter: blur(10px); transform: translateY(3px) scale(1.014);
         text-shadow: 0 0 14px currentColor; }
  42%  { opacity: 0.72; filter: blur(3.5px); }
  100% { opacity: 1;    filter: blur(0);    transform: none; text-shadow: none; }
}
/* 气泡平滑长高：JS 用显式 height + spring 过渡做 FLIP */
.m-ai-bubble {
  overflow: hidden;
  transform-origin: bottom left;
  transition: height 0.34s var(--m-spring);
}
/* 三个呼吸跳动的小点（AI 思考中） */
.m-typing { display: inline-flex; align-items: center; gap: 6px; height: 20px; }
.m-typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.34;
  animation: m-breathe 1.15s var(--m-ease) infinite;
}
.m-typing i:nth-child(2) { animation-delay: 0.16s; }
.m-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes m-breathe {
  0%, 100% { opacity: 0.28; transform: translateY(0) scale(0.82); }
  50%      { opacity: 0.92; transform: translateY(-4px) scale(1.08); }
}

/* ============ 07 骨架屏：柔和斜向光带，每 1.5s 左扫 ============ */
.sk::after {
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.30) 46%,
      rgba(255, 255, 255, 0.52) 50%,
      rgba(255, 255, 255, 0.30) 54%,
      rgba(255, 255, 255, 0) 70%);
  transform: translateX(-120%) skewX(-10deg);
  animation: m-sweep 1.5s linear infinite;
}
html[data-neo-theme="dark"] .sk::after {
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.045) 46%,
      rgba(255, 255, 255, 0.085) 50%,
      rgba(255, 255, 255, 0.045) 54%,
      rgba(255, 255, 255, 0) 70%);
}
@keyframes m-sweep {
  from { transform: translateX(-120%) skewX(-10deg); }
  to   { transform: translateX(120%)  skewX(-10deg); }
}
/* 骨架淡出幽灵层：内容进来时骨架同步淡出，避免闪白 */
.m-sk-host { position: relative; }
.m-sk-ghost {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
  opacity: 1;
  animation: m-ghost-out 0.30s var(--m-ease) forwards;
}
@keyframes m-ghost-out { to { opacity: 0; } }

/* 数据到位：每块错开 60ms，淡入 + 上移 8px */
.m-enter {
  opacity: 0;
  transform: translateY(8px);
  animation: m-enter-in 0.50s var(--m-ease) forwards;
  animation-delay: calc(var(--m-i, 0) * 60ms);
}
@keyframes m-enter-in { to { opacity: 1; transform: none; } }

/* ============ 08 图片：同色调模糊占位 → 清晰 ============ */
.m-img {
  background-color: var(--m-ph);
  background-image: linear-gradient(135deg, var(--m-t2), var(--m-t1) 55%, var(--m-t3));
  filter: blur(12px);
  transform: scale(1.04);
  opacity: 0.88;
  transition: filter 0.54s var(--m-ease),
              transform 0.64s var(--m-ease),
              opacity 0.36s linear;
}
.m-img.is-sharp { filter: blur(0); transform: scale(1); opacity: 1; }
.m-img.is-error  { filter: none; transform: none; opacity: 1; }

/* ============ 09 加载更多：3 个跳动小圆点 ============ */
.m-more {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 48px; padding: 16px 8px;
  color: var(--m-ink-soft); font-size: 12px; letter-spacing: 0.04em;
}
.m-dots { display: inline-flex; align-items: center; gap: 6px; height: 14px; }
.m-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--m-dot);
  animation: m-dot 1.05s var(--m-ease) infinite;
}
.m-dots i:nth-child(2) { animation-delay: 0.16s; }
.m-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes m-dot {
  0%, 100% { transform: translateY(0)    scale(0.86); opacity: 0.45; }
  50%      { transform: translateY(-5px) scale(1.10); opacity: 1; }
}
.m-end { font-size: 12px; color: var(--m-ink-soft); opacity: 0.72; }
/* 新卡片：每张错开 50ms，从下方 24px 滑入淡入 */
.m-more-in {
  opacity: 0;
  transform: translateY(24px);
  animation: m-more-up 0.48s var(--m-ease) forwards;
  animation-delay: calc(var(--m-i, 0) * 50ms);
}
@keyframes m-more-up { to { opacity: 1; transform: none; } }

/* ============ 8pt 网格工具类（可选，供页面主动使用） ============ */
.m-p1 { padding: var(--m-s1); } .m-p2 { padding: var(--m-s2); }
.m-p3 { padding: var(--m-s3); } .m-p4 { padding: var(--m-s4); }
.m-g1 { gap: var(--m-s1); }     .m-g2 { gap: var(--m-s2); }
.m-g3 { gap: var(--m-s3); }     .m-g4 { gap: var(--m-s4); }
.m-mt1 { margin-top: var(--m-s1); } .m-mt2 { margin-top: var(--m-s2); }
.m-mt3 { margin-top: var(--m-s3); } .m-mt4 { margin-top: var(--m-s4); }

/* ============ 无障碍：减少动效时全部直达终态 ============ */
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
  .m-ink, .m-enter, .m-more-in, .m-sk-ghost,
  .m-typing i, .m-dots i { animation: none !important; }
  .m-ink, .m-enter, .m-more-in { opacity: 1 !important; filter: none !important; transform: none !important; }
  .m-sk-ghost { display: none; }
  .m-img { filter: none; transform: none; opacity: 1; }
  .m-q, .m-ai-bubble { transition: none; }
}