/* ─── 🍞 AI面包屑导航 ───────────────────────────────
 * 标签含义: @COUPLED=联动文件 @GOTCHA=陷阱 @BUGFIX=Bug修复 @MAGIC=魔数
 *          @WHY=选型理由 @PERF=性能
 *
 * 面包屑:
 *   @COUPLED 双入口同步: public/chat.html, desktop/renderer/chat.html
 *   @COUPLED 动效令牌见: public/css/tbp-theme.css (--tbp-ease-*, --tbp-dur-*, --tbp-glow-*)
 *   📖 见: 开发文档/变更日志-2026-07-11.md
 *   @WHY 2026-07-11: 汇象风格动效三层 — ①打字机光标(仅.tbp-streaming-cursor工具类,JS可控
 *         无默认常驻光标避免误导) ②首屏Logo流动墙 ③消息淡入入场
 *         纯CSS实现，不碰HTML/JS结构，不影响元素位置和交互
 *   @WHY 2026-07-11: UI翻新阶段1 — Logo流动墙加速(20s→12s)更快感知动效
 *   @PERF 所有动画使用 transform+opacity(GPU合成层)，避免触发layout/paint重排
 *   @GOTCHA 双入口chat.html CSS引入列表不完全一致(desktop多chat-additional.css)，
 *           本文件需在两个入口分别添加
 * ──────────────────────────────────────────────── */

/* ================================================================
 *  TBP 微动效层 — 汇象暗黑科技风格
 *  纯 CSS 增强，不改变 DOM 结构 / 布局 / 交互逻辑
 * ================================================================ */

/* ===== ① 打字机光标 ===== */
/* 工具类：JS 在流式消息容器上加 .tbp-streaming-cursor */
.tbp-streaming-cursor::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--tbp-accent);
  animation: tbp-cursor-blink 0.8s steps(1) infinite;
}

@keyframes tbp-cursor-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* 流式输出时气泡内文字末尾强光标 */
.tbp-streaming-cursor .bubble-text::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--tbp-accent);
  animation: tbp-cursor-blink 0.8s steps(1) infinite;
}


/* ===== ② 首屏 Logo 流动墙 ===== */
/* 空状态背景：多层浮动光斑模拟 AI 模型 logo 墙 */
.chat-messages-empty {
  position: relative;
  overflow: hidden;
}

.chat-messages-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 6 层径向渐变光斑，模拟流动的模型 logo 阵列 */
  background:
    radial-gradient(ellipse 120px 120px at 20% 30%, rgba(102,126,234,.06) 0%, transparent 70%),
    radial-gradient(ellipse 100px 100px at 75% 20%, rgba(201,169,110,.04) 0%, transparent 70%),
    radial-gradient(ellipse 90px 90px  at 60% 70%, rgba(102,126,234,.05) 0%, transparent 70%),
    radial-gradient(ellipse 80px 80px  at 30% 75%, rgba(139,92,246,.04) 0%, transparent 70%),
    radial-gradient(ellipse 110px 110px at 85% 60%, rgba(201,169,110,.03) 0%, transparent 70%),
    radial-gradient(ellipse 70px 70px  at 40% 50%, rgba(102,126,234,.04) 0%, transparent 70%);
  animation: tbp-logo-flow 12s linear infinite;
}

@keyframes tbp-logo-flow {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(15px, -8px) rotate(90deg); }
  50%  { transform: translate(-10px, 12px) rotate(180deg); }
  75%  { transform: translate(-12px, -6px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}


/* ===== ③ 消息淡入入场 ===== */
/* 每条消息平滑 fadeIn+上移，不改变布局 */
.msg-row {
  animation: tbp-msg-fade-in 0.35s var(--tbp-ease-decel) both;
}

@keyframes tbp-msg-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 侧栏会话列表项 — 同样淡入 */
.sidebar-chat-item {
  animation: tbp-item-fade-in 0.25s var(--tbp-ease-decel) both;
}

@keyframes tbp-item-fade-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 工具卡片/设置项 hover 微抬（不跳变，仅微移） */
.tool-card,
.wf-node {
  transition: transform 0.2s var(--tbp-ease-standard),
              box-shadow 0.2s var(--tbp-ease-standard);
}

.tool-card:hover,
.wf-node:hover {
  transform: translateY(-2px);
  box-shadow: var(--tbp-glow-soft);
}


/* ===== prefers-reduced-motion 已在 tbp-theme.css 全局覆盖 ===== */