/* ============================================================
   星枢AI 全站动态动效层 motion.css  —— 1:1 对齐参考站顺滑手感
   仅做 transform / opacity，不涉及颜色，深浅色通用
   ============================================================ */

/* ---- 模型卡 / 智能体卡：级联淡入上浮 ---- */
@keyframes spCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* @V55-ANIM-SAFE */ .ws-model { opacity:1; animation: spCardIn .42s cubic-bezier(.22,.61,.36,1) both; }
.ws-model:nth-child(1){animation-delay:.00s}.ws-model:nth-child(2){animation-delay:.03s}
.ws-model:nth-child(3){animation-delay:.06s}.ws-model:nth-child(4){animation-delay:.09s}
.ws-model:nth-child(5){animation-delay:.12s}.ws-model:nth-child(6){animation-delay:.15s}
.ws-model:nth-child(7){animation-delay:.18s}.ws-model:nth-child(8){animation-delay:.21s}
.ws-model:nth-child(9){animation-delay:.24s}.ws-model:nth-child(10){animation-delay:.27s}
.ws-model:nth-child(n+11){animation-delay:.30s}
.ws-model { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.ws-model:hover { transform: translateY(-3px); }
.ws-model:active { transform: translateY(-1px) scale(.99); }

/* ---- 灵感瀑布流卡：柔和上浮 ---- */
@keyframes spWfIn { from {opacity:0; transform: translateY(18px);} to {opacity:1; transform: translateY(0);} }
.wf-card { opacity:1; animation: spWfIn .45s ease both; transition: transform .2s ease, box-shadow .2s ease; }
.wf-card:hover { transform: translateY(-4px); }
.wf-card:nth-child(2){animation-delay:.05s}.wf-card:nth-child(3){animation-delay:.1s}
.wf-card:nth-child(4){animation-delay:.15s}.wf-card:nth-child(5){animation-delay:.2s}
.wf-card:nth-child(6){animation-delay:.25s}.wf-card:nth-child(n+7){animation-delay:.3s}

/* ---- 对话气泡：弹入 ---- */
@keyframes spBubbleIn { from {opacity:0; transform: translateY(10px);} to {opacity:1; transform: translateY(0);} }
.chat-bubble { opacity:1; animation: spBubbleIn .3s ease both; }

/* ---- 流式光标：柔和呼吸闪烁（确保未被覆盖） ---- */
@keyframes spCaretBlink { 0%,45%{opacity:1} 50%,100%{opacity:0} }
.chat-bubble.streaming p::after {
  content: "▍"; margin-left: 2px; font-weight: 400;
  color: var(--accent, #22d3ee);
  animation: spCaretBlink .85s steps(1) infinite;
}

/* ---- 输入框：聚焦柔和辉光 + 轻微上浮 ---- */
.composer-box, .cp-v2 .composer-box { transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease; }
.cp-v2:focus-within .composer-box {
  box-shadow: 0 0 0 1px rgba(34,211,238,.35), 0 10px 34px rgba(14,158,192,.16);
}
.cp-v2 .cp-tool { transition: transform .16s ease, background .16s ease, color .16s ease; }
.cp-v2 .cp-tool:hover { transform: translateY(-2px); }
.cp-v2 .cp-tool:active { transform: scale(.92); }

/* ---- 发送按钮：按压反馈 + 就绪呼吸 ---- */
@keyframes spSendPulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.35);} 50%{box-shadow:0 0 0 5px rgba(34,211,238,0);} }
#sendBtn, .cp-send { transition: transform .14s ease, filter .14s ease; }
#sendBtn:not(:disabled):active, .cp-send:not(:disabled):active { transform: scale(.9); }

/* ---- 主导航 Tab：底部指示/点击反馈 ---- */
.sb-nav-item { transition: color .18s ease, background .18s ease, transform .12s ease; }
.sb-nav-item:active { transform: scale(.96); }

/* ---- 通用弹窗：缩放淡入 ---- */
@keyframes spModalIn { from{opacity:0; transform: translateY(16px) scale(.97);} to{opacity:1; transform:none;} }
.sp-ip-mask[style*="flex"], .sp-ip-mask.show, #inspDetailMask.show, .sp-ip-mask:not([hidden]) .sp-ip-box,
#inspDetailMask:not([hidden]) .id-box { animation: spModalIn .28s cubic-bezier(.22,.61,.36,1) both; }

/* ---- 骨架/加载点跳动 ---- */
@keyframes spDotJump { 0%,80%,100%{transform:translateY(0);opacity:.5} 40%{transform:translateY(-5px);opacity:1} }
.ig-loading-tip::before { content:""; display:inline-block; width:6px;height:6px;border-radius:50%;
  background:var(--accent,#22d3ee); margin-right:8px; animation:spDotJump 1.1s ease infinite; }

/* ---- 尊重系统“减少动态”偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  .ws-model, .wf-card, .chat-bubble, .sp-ip-mask, #inspDetailMask { animation: none !important; }
  .ws-model, .wf-card { transition: none !important; }
}

/* AI生成图片结果 */
.chat-bubble p .ai-result-img{display:block;max-width:100%;width:100%;border-radius:14px;margin:8px 0 4px;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.35);cursor:zoom-in;background:#0d0f14;}
html[data-theme=light] .chat-bubble p .ai-result-img{border-color:#e9ebf2;box-shadow:0 8px 24px rgba(15,23,42,.10);background:#f4f6fb;}

.ai-result-video{width:100%;max-width:560px;border-radius:14px;margin:8px 0;background:#000;display:block}.ai-result-audio{width:100%;max-width:420px;margin:8px 0}

.ai-think{margin:0 0 10px;border:1px solid rgba(120,150,190,.18);border-radius:12px;background:rgba(120,140,180,.08);overflow:hidden;font-size:13px}
.ai-think-head{width:100%;display:flex;align-items:center;gap:8px;padding:9px 12px;background:none;border:0;cursor:pointer;color:#9fb3c8;font-weight:600}
.ai-think-spin{width:13px;height:13px;border-radius:50%;border:2px solid rgba(150,180,220,.25);border-top-color:#5fe3f5;animation:aiThinkSpin .8s linear infinite;flex:0 0 auto}
.ai-think.collapsed .ai-think-spin{display:none}
.ai-think-title{flex:1;text-align:left}
.ai-think-caret{transition:transform .2s;font-style:normal}
.ai-think.collapsed .ai-think-caret{transform:rotate(-90deg)}
.ai-think-body{padding:2px 12px 10px;color:#8aa0b6;line-height:1.65;white-space:pre-wrap;max-height:240px;overflow:auto}
.ai-think.collapsed .ai-think-body{display:none}
@keyframes aiThinkSpin{to{transform:rotate(360deg)}}
html[data-theme=light] .ai-think{background:#f4f7fc;border-color:#e2e9f2}
html[data-theme=light] .ai-think-head{color:#5b6b82}
html[data-theme=light] .ai-think-body{color:#64748b}
/* 充值「活动中」角标：对标参考站 recharge-activity-tag，渐变胶囊 + 呼吸脉冲 */
.ws-recharge .rc-tag{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:999px;font-size:9px;font-weight:800;line-height:1.5;letter-spacing:.5px;color:#7a2e00;background:linear-gradient(135deg,#ffe08a,#ffb43d);box-shadow:0 0 0 0 rgba(255,170,60,.55);animation:rcTagPulse 1.6s ease-out infinite;vertical-align:middle}
@keyframes rcTagPulse{0%{box-shadow:0 0 0 0 rgba(255,170,60,.55)}70%{box-shadow:0 0 0 7px rgba(255,170,60,0)}100%{box-shadow:0 0 0 0 rgba(255,170,60,0)}}
html[data-theme=light] .ws-recharge .rc-tag{color:#7a2e00}
/* ===== 对话历史：单条删除 + 清空全部（对标参考站） ===== */
.history-item{position:relative;}
.history-item .hi-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.history-item .hi-body strong{font-size:13px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.history-item .hi-body small{font-size:11px;color:var(--text-muted);}
.history-item .hist-del{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:13px;opacity:0;transform:translateX(4px);transition:opacity .15s,transform .15s,background .15s,color .15s;}
.history-item:hover .hist-del{opacity:1;transform:translateX(0);}
.history-item .hist-del:hover{background:rgba(239,68,68,.14);color:#ef4444;}
.history-clear-btn{background:transparent;border:1px solid var(--border);color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:12.5px;padding:8px;transition:all .15s;}
.history-clear-btn:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.08);}

/* ===== 分类型生成等待界面（图骨架/视频节点/音乐均衡器/语音声波） ===== */
.mw-box{padding:6px 2px;min-width:220px;max-width:360px;}
.mw-meta{display:flex;align-items:center;gap:10px;margin-top:12px;color:var(--text-secondary);font-size:13.5px;}
.mw-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(124,92,255,.25);border-top-color:#7c5cff;display:inline-block;animation:mw-rot .8s linear infinite;flex:0 0 auto;}
@keyframes mw-rot{to{transform:rotate(360deg);}}
.mw-stage{animation:mw-fade .3s ease;}
@keyframes mw-fade{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}
/* 图片：微光骨架 */
.mw-skel{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mw-skel i{display:block;height:84px;border-radius:12px;background:linear-gradient(100deg,rgba(148,163,184,.14) 30%,rgba(148,163,184,.30) 50%,rgba(148,163,184,.14) 70%);background-size:220% 100%;animation:mw-shimmer 1.3s ease-in-out infinite;}
.mw-skel i:first-child{grid-column:1 / -1;height:120px;}
.mw-skel i:nth-child(3){animation-delay:.18s;}
@keyframes mw-shimmer{0%{background-position:120% 0;}100%{background-position:-120% 0;}}
/* 视频：分阶段节点 */
.mw-nodes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.mw-nodes li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-muted);transition:color .25s;}
.mw-dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(148,163,184,.4);flex:0 0 auto;position:relative;}
.mw-nodes li.active{color:var(--text-primary);}
.mw-nodes li.active .mw-dot{border-color:#7c5cff;}
.mw-nodes li.active .mw-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:#7c5cff;animation:mw-pulse 1s ease-in-out infinite;}
.mw-nodes li.done{color:var(--text-secondary);}
.mw-nodes li.done .mw-dot{border-color:#22c55e;background:#22c55e;}
.mw-nodes li.done .mw-dot::after{content:"✓";color:#fff;font-size:9px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
@keyframes mw-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.72);}}
/* 音乐均衡器 */
.mw-eq{display:flex;align-items:flex-end;gap:5px;height:46px;}
.mw-eq i{width:7px;border-radius:4px;background:linear-gradient(180deg,#a78bfa,#7c5cff);height:30%;animation:mw-eq 1s ease-in-out infinite;}
.mw-eq i:nth-child(1){animation-delay:0s;}.mw-eq i:nth-child(2){animation-delay:.15s;}.mw-eq i:nth-child(3){animation-delay:.3s;}.mw-eq i:nth-child(4){animation-delay:.45s;}.mw-eq i:nth-child(5){animation-delay:.6s;}
@keyframes mw-eq{0%,100%{height:26%;}50%{height:100%;}}
/* 语音声波 */
.mw-wave{display:flex;align-items:center;gap:5px;height:40px;}
.mw-wave i{width:4px;border-radius:3px;background:linear-gradient(180deg,#38bdf8,#6366f1);height:40%;animation:mw-wave 1.1s ease-in-out infinite;}
.mw-wave i:nth-child(2n){animation-delay:.12s;}.mw-wave i:nth-child(3n){animation-delay:.24s;}.mw-wave i:nth-child(5n){animation-delay:.36s;}
@keyframes mw-wave{0%,100%{height:30%;opacity:.6;}50%{height:100%;opacity:1;}}
[data-theme="light"] .mw-skel i{background:linear-gradient(100deg,rgba(100,116,139,.12) 30%,rgba(100,116,139,.26) 50%,rgba(100,116,139,.12) 70%);background-size:220% 100%;}

/* ===== 媒体溢出根治（v8）：flex 子项 min-width:0 链 + 媒体宽高上限 + 线程横向裁切，杜绝大图/视频撑破气泡与输入框 ===== */
.ws-chat{overflow-x:hidden;min-width:0;}
.ws-chat .chat-bubble{min-width:0;max-width:min(78%,760px);}
.ws-chat .chat-bubble p{min-width:0;max-width:100%;overflow-wrap:anywhere;}
.chat-bubble p .ai-result-img{width:100%;max-width:100% !important;height:auto;max-height:72vh;object-fit:contain;}
.ai-result-video{width:100%;max-width:min(560px,100%) !important;height:auto;max-height:72vh;object-fit:contain;}
.ai-result-audio{width:100%;max-width:min(420px,100%) !important;}
@media (max-width:860px){.ws-chat .chat-bubble{max-width:92%;}.ai-result-video{max-width:100% !important;}}

/* ===== item22 智能体/模型分类差异化打字机光标动效 ===== */
/* 写作：细墨水竖线，慢闪 */
.chat-bubble.caret-ink.streaming p::after{content:"▏";color:#7c9cff;animation:caretBlink 1.1s steps(1) infinite;text-shadow:0 0 8px rgba(124,156,255,.7);}
/* 设计：流光双色横杠 */
.chat-bubble.caret-shimmer.streaming p::after{content:"▍";background:linear-gradient(90deg,#22d3ee,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:caretShimmer .8s linear infinite;}
@keyframes caretShimmer{0%{filter:hue-rotate(0);opacity:1}50%{opacity:.55}100%{filter:hue-rotate(40deg);opacity:1}}
/* 影视：分镜方块，蹦跳 */
.chat-bubble.caret-burst.streaming p::after{content:"■";font-size:.8em;color:#f472b6;animation:caretBurst .55s ease-in-out infinite;}
@keyframes caretBurst{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-3px);opacity:.6}}
/* 工具：等宽实心块，干脆 */
.chat-bubble.caret-block.streaming p::after{content:"█";color:#34d399;animation:caretBlink .7s steps(1) infinite;}
/* 分类气泡轻微入场/呼吸差异 */
.chat-bubble.typer-cat-video.streaming{animation:bubblePulseFilm 1.1s ease-in-out infinite;}
@keyframes bubblePulseFilm{0%,100%{box-shadow:0 0 0 rgba(244,114,182,0)}50%{box-shadow:0 0 22px rgba(244,114,182,.14)}}
@media (prefers-reduced-motion:reduce){.chat-bubble[class*="caret-"].streaming p::after,.chat-bubble.typer-cat-video.streaming{animation:none;}}

/* ===== item4：视频/媒体生成等待界面 科技时间线 ===== */
.mw-box{border:1px solid rgba(34,211,238,.16);border-radius:14px;padding:14px 16px;margin:6px 0;
  background:linear-gradient(180deg,rgba(20,26,40,.6),rgba(12,16,26,.55));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);max-width:560px;}
.mv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.mv-title{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#dff6ff;letter-spacing:.02em;}
.mv-core{width:14px;height:14px;border-radius:50%;background:conic-gradient(from 0deg,#22d3ee,#818cf8,#22d3ee);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:mvSpin 1.6s linear infinite;}
@keyframes mvSpin{to{transform:rotate(360deg);}}
.mv-pct{font-variant-numeric:tabular-nums;font-size:13px;font-weight:800;color:#22d3ee;text-shadow:0 0 10px rgba(34,211,238,.5);}
.mv-track{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;position:relative;}
.mv-fill{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#0ea5e9,#22d3ee,#818cf8);
  box-shadow:0 0 12px rgba(34,211,238,.6);transition:width .2s linear;position:relative;}
.mv-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:mvShine 1.3s linear infinite;}
@keyframes mvShine{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
.mv-scan{margin:10px 0 4px;height:64px;border-radius:10px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(34,211,238,.05) 0 2px,transparent 2px 6px),linear-gradient(135deg,rgba(34,211,238,.08),rgba(129,140,248,.08));
  border:1px solid rgba(34,211,238,.14);}
.mv-scan span{position:absolute;left:0;right:0;top:0;height:40%;
  background:linear-gradient(180deg,rgba(34,211,238,.28),transparent);animation:mvScan 1.8s ease-in-out infinite alternate;}
@keyframes mvScan{from{top:0;}to{top:60%;}}
.mw-nodes{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.mv-nodes{gap:11px;}
.mw-nodes li{display:flex;align-items:flex-start;gap:10px;opacity:.45;transition:.3s;}
.mw-nodes li.active{opacity:1;}
.mw-nodes li.done{opacity:.8;}
.mw-dot{width:16px;height:16px;border-radius:50%;flex:0 0 auto;margin-top:2px;border:2px solid rgba(255,255,255,.18);position:relative;background:rgba(255,255,255,.04);}
.mw-nodes li.active .mw-dot{border-color:#22d3ee;box-shadow:0 0 10px rgba(34,211,238,.6);}
.mw-nodes li.active .mw-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#22d3ee;animation:mvPulse 1s ease-in-out infinite;}
@keyframes mvPulse{0%,100%{transform:scale(.8);opacity:.7;}50%{transform:scale(1.1);opacity:1;}}
.mw-nodes li.done .mw-dot{border-color:#34d399;background:#34d399;}
.mw-nodes li.done .mw-dot::before{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#04141a;font-size:10px;font-weight:900;}
.mw-nodes li.done .mw-dot::after{display:none;}
.mw-txt{display:flex;flex-direction:column;gap:1px;}
.mw-lab{font-size:13px;font-weight:700;color:#e8f4ff;}
.mw-sub{font-size:11px;color:#8aa0b6;}
.mw-nodes li.active .mw-lab{color:#22d3ee;}
html[data-theme="light"] .mw-box{background:linear-gradient(180deg,#ffffff,#f3f8fd);border-color:#bfe6ee;box-shadow:0 8px 24px rgba(30,60,110,.08);}
html[data-theme="light"] .mv-title{color:#16233a;}
html[data-theme="light"] .mw-lab{color:#1f2d44;}
html[data-theme="light"] .mw-sub{color:#71849c;}
html[data-theme="light"] .mv-track{background:#e6edf6;}
html[data-theme="light"] .mv-scan{background:repeating-linear-gradient(0deg,rgba(14,158,192,.06) 0 2px,transparent 2px 6px),linear-gradient(135deg,rgba(14,158,192,.08),rgba(99,102,241,.06));border-color:#bfe6ee;}

/* @V55-ANIM-SAFE 兜底：动画时间线冻结/后台标签/异常时保证内容可见 */
html.sp-anim-safe .ws-model, html.sp-anim-safe .wf-card, html.sp-anim-safe .chat-bubble{
  opacity:1 !important; transform:none !important;
}