/* ============================================================
 * Fish Ai UI v3：深渊极光动效层（2026-09 · 悬浮舱重构）
 * 覆盖：FX 极光舞台 / 新 Hero 入场编排（logo→徽章→标题→描述→
 *       Bento 卡→模型芯片 60ms 错峰 + 标题 blur 领入 + 光环旋转 /
 *       消息入场 / 流式光环 v2（--spin 旋转 + --breath 呼吸）/
 *       回到底部按钮 / 代码块头部 / 历史分组 / 复制弹跳 /
 *       顶栏滚动感知 / 模型快捷芯片 / 拖拽蒙层 / 首屏编排 /
 *       prefers-reduced-motion 全量守卫
 * 业务样式仍在 index.css 与 index-ui-v2.css，本文件只做视觉增强。
 * ============================================================ */

/* ===== 0. FX 极光舞台（深渊极光动态背景，设计规格原文） ===== */
.fx-stage{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-aurora{position:absolute;inset:-20%;filter:blur(30px);animation:fxPan 40s ease-in-out infinite alternate;
  background:
    radial-gradient(42% 34% at 18% 8%,rgba(34,211,238,.16),transparent 70%),
    radial-gradient(50% 40% at 82% 12%,rgba(99,102,241,.2),transparent 72%),
    radial-gradient(46% 36% at 50% 96%,rgba(168,85,247,.14),transparent 70%)}
@keyframes fxPan{to{transform:translate3d(-4%,3%,0) rotate(2deg) scale(1.06)}}
.fx-orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.5}
.fx-orb-cyan{width:44vmax;height:44vmax;left:-12vmax;top:-14vmax;background:rgba(34,211,238,.14);animation:fxDriftA 26s ease-in-out infinite alternate}
.fx-orb-indigo{width:52vmax;height:52vmax;right:-16vmax;top:6vmax;background:rgba(99,102,241,.16);animation:fxDriftB 32s ease-in-out infinite alternate}
.fx-orb-violet{width:40vmax;height:40vmax;left:28vmax;bottom:-18vmax;background:rgba(168,85,247,.12);animation:fxDriftA 38s ease-in-out infinite alternate-reverse}
@keyframes fxDriftA{to{transform:translate3d(6vmax,4vmax,0)}}
@keyframes fxDriftB{to{transform:translate3d(-5vmax,6vmax,0)}}
.fx-grid{position:absolute;inset:0;background-size:36px 36px;
  background-image:linear-gradient(rgba(139,152,208,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(139,152,208,.05) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0,#000 30%,transparent 75%)}
.fx-noise{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
html[data-theme="light"] .fx-aurora{opacity:.5}
html[data-theme="light"] .fx-orb{opacity:.3}
html[data-theme="light"] .fx-grid{background-image:linear-gradient(rgba(100,116,160,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(100,116,160,.06) 1px,transparent 1px)}
@media (prefers-reduced-motion:reduce){.fx-aurora,.fx-orb{animation:none!important}}

/* ===== 1. 流式光环变量（不支持的浏览器降级为静态渐变环） ===== */
@property --spin {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
/* 光环外扩呼吸系数：box-shadow 长度/透明度随其在 0↔1 间插值（仅动画自定义属性） */
@property --breath {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

/* ===== 2. 欢迎页：氛围光晕漂浮 + 新 Hero 60ms 错峰入场 ===== */
@keyframes auroraDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, 6%, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes auroraDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-5%, -4%, 0) scale(1.1); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.welcome::before { animation: auroraDriftA 16s ease-in-out infinite; }
.welcome::after  { animation: auroraDriftB 19s ease-in-out infinite; }

@keyframes welcomeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* 标题领入：上浮 + blur 聚焦渐显（transform/filter/opacity 合成友好） */
@keyframes titleIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* logo 光晕脉冲：纯 filter 辉光呼吸（4s infinite） */
@keyframes welcomeGlow {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(var(--glow), .35)); }
  50%      { filter: drop-shadow(0 0 28px rgba(var(--glow), .6)) drop-shadow(0 0 46px rgba(var(--glow-cyan), .25)); }
}
/* logo 漂浮（隐式 0%/100% 回落到 index.css 的 rotate(-3deg) 基态） */
@keyframes fishFloat { 50% { transform: rotate(3deg) translateY(-7px); } }
.welcome-logo {
  animation:
    fishFloat 5s ease-in-out infinite,
    welcomeIn .55s var(--ease-out) backwards,
    welcomeGlow 4s ease-in-out infinite;
  animation-delay: 0s, .02s, 0s;
}
/* 光环：内层静态描边，外层虚线环缓慢旋转（纯 transform） */
@keyframes wlSpin { to { transform: rotate(360deg); } }
.wl-ring::before { animation: wlSpin 26s linear infinite; }
/* 状态芯片绿点：opacity + 辉光呼吸 */
@keyframes wbPulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(52, 211, 153, .9)); }
  50%      { opacity: .45; filter: drop-shadow(0 0 2px rgba(52, 211, 153, .35)); }
}
.wb-dot { animation: wbPulse 2.2s ease-in-out infinite; }
/* 入场阶梯：logo 0 → 徽章 .06 → 标题 .12 → 描述 .18 → 卡片 .24~.42 → 芯片 .48~.66（步进 60ms） */
.welcome-hero > *:not(.welcome-logo) { animation: welcomeIn .55s var(--ease-out) backwards; }
.welcome-hero > .welcome-badges { animation-delay: .06s; }
.welcome-hero > .welcome-title { animation: titleIn .6s var(--ease-out) backwards; animation-delay: .12s; }
.welcome-hero > .welcome-desc { animation-delay: .18s; }
.suggest-card { animation: welcomeIn .5s var(--ease-out) backwards; }
.suggest-card:nth-child(1) { animation-delay: .24s; }
.suggest-card:nth-child(2) { animation-delay: .3s; }
.suggest-card:nth-child(3) { animation-delay: .36s; }
.suggest-card:nth-child(4) { animation-delay: .42s; }
/* 芯片由 JS 注入（mq-label 为第 1 子元素，芯片为第 2~5），继续 60ms 错峰 */
.mq-chip { animation: welcomeIn .45s var(--ease-out) backwards; }
.model-quick .mq-chip:nth-child(2) { animation-delay: .48s; }
.model-quick .mq-chip:nth-child(3) { animation-delay: .54s; }
.model-quick .mq-chip:nth-child(4) { animation-delay: .6s; }
.model-quick .mq-chip:nth-child(5) { animation-delay: .66s; }

/* ===== 3. 消息入场动画（仅动态新增的消息带 .msg-enter） ===== */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
}
.msg.msg-enter { animation: msgIn .38s var(--ease-spring) backwards; }

/* ===== 4. 流式光环 v2：conic 旋转描边 + 外扩辉光呼吸 =====
 * 注意：::before 基态是命令胶囊顶部高光线（index.css），
 * 此处全量覆写其定位/尺寸/背景，确保光环完整接管。 */
.input-box.is-streaming { border-color: rgba(var(--glow), .5); }
.input-box.is-streaming::before {
  content: "";
  position: absolute;
  top: -3px; left: -3px; right: -3px; bottom: -3px;
  height: auto;
  border-radius: 22px;
  padding: 2px;
  background: conic-gradient(from var(--spin), var(--accent), var(--primary-strong) 35%, var(--violet) 68%, var(--accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  box-shadow:
    0 0 calc(14px + 16px * var(--breath)) rgba(var(--glow), calc(.18 + .16 * var(--breath))),
    0 0 calc(34px + 20px * var(--breath)) rgba(var(--glow-cyan), calc(.08 + .1 * var(--breath)));
  animation: spinRing 2.6s linear infinite, ringBreath 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes spinRing { to { --spin: 360deg; } }
@keyframes ringBreath {
  0%, 100% { --breath: 0; }
  50%      { --breath: 1; }
}

/* ===== 5. 回到底部悬浮按钮 ===== */
.scroll-bottom-btn {
  position: absolute;
  right: 26px;
  bottom: 140px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--text-secondary);
  box-shadow: var(--shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity .22s ease, transform .26s var(--ease-spring), color .15s, border-color .15s;
  z-index: 60;
}
.scroll-bottom-btn svg { width: 19px; height: 19px; }
.scroll-bottom-btn.show { opacity: 1; transform: none; pointer-events: auto; }
.scroll-bottom-btn:hover { color: var(--primary); border-color: rgba(var(--glow), .45); }
html[data-theme="dark"] .scroll-bottom-btn { box-shadow: var(--shadow-lg); }
.scroll-bottom-btn.show:hover {
  color: var(--primary);
  border-color: rgba(var(--glow), .45);
  box-shadow: var(--shadow-lg), var(--glow-shadow);
}

/* ===== 6. 代码块头部：三色点 + 语言徽章 ===== */
.code-head-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.code-dots { display: flex; gap: 5px; flex-shrink: 0; }
.code-dots i { width: 9px; height: 9px; border-radius: 50%; }
.code-dots i:nth-child(1) { background: #ff5f57; }
.code-dots i:nth-child(2) { background: #febc2e; }
.code-dots i:nth-child(3) { background: #28c840; }
.code-lang {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2.5px 8px;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}
/* 常见语言按官方品牌色着色 */
.code-head[data-lang="python"] .code-lang,
.code-head[data-lang="py"] .code-lang { background: #3572a5; color: #fff; }
.code-head[data-lang="javascript"] .code-lang,
.code-head[data-lang="js"] .code-lang { background: #f1e05a; color: #3b3108; }
.code-head[data-lang="typescript"] .code-lang,
.code-head[data-lang="ts"] .code-lang { background: #3178c6; color: #fff; }
.code-head[data-lang="java"] .code-lang { background: #b07219; color: #fff; }
.code-head[data-lang="sql"] .code-lang { background: #d97706; color: #fff; }
.code-head[data-lang="html"] .code-lang,
.code-head[data-lang="xml"] .code-lang { background: #e34c26; color: #fff; }
.code-head[data-lang="css"] .code-lang,
.code-head[data-lang="scss"] .code-lang,
.code-head[data-lang="less"] .code-lang { background: #563d7c; color: #fff; }
.code-head[data-lang="json"] .code-lang { background: #cbcb41; color: #42390a; }
.code-head[data-lang="bash"] .code-lang,
.code-head[data-lang="shell"] .code-lang,
.code-head[data-lang="sh"] .code-lang { background: #89e051; color: #1d3b0f; }
.code-head[data-lang="go"] .code-lang { background: #00add8; color: #fff; }
.code-head[data-lang="rust"] .code-lang { background: #dea584; color: #4a2513; }
.code-head[data-lang="php"] .code-lang { background: #4f5d95; color: #fff; }
.code-head[data-lang="markdown"] .code-lang,
.code-head[data-lang="md"] .code-lang { background: #083fa1; color: #fff; }
.code-head[data-lang="c"] .code-lang,
.code-head[data-lang="cpp"] .code-lang,
.code-head[data-lang="c++"] .code-lang { background: #555555; color: #fff; }

/* ===== 7. 历史记录按日期分组 ===== */
.history-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 4px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text-muted);
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}
.history-group-label:first-child { margin-top: 2px; }
.history-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-soft), transparent);
}
html[data-theme="dark"] .history-group-label { color: var(--text-muted); }

/* ===== 8. 复制成功：图标弹跳 ===== */
@keyframes copyPop {
  0%   { transform: scale(.3); }
  60%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.copy-btn.copied svg,
.md-table-copy.copied svg,
.user-copy-btn.copied svg,
.assistant-copy-btn.copied svg {
  animation: copyPop .32s var(--ease-spring);
}

/* ===== 9. 顶栏滚动感知（scrolled 收紧悬浮胶囊玻璃 + 加深阴影） ===== */
.main-header { transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease; }
.main-header.scrolled {
  background: var(--surface-raised);
  border-color: rgba(var(--glow), .28);
  box-shadow: var(--shadow-lg);
}
html[data-theme="dark"] .main-header.scrolled {
  box-shadow: var(--shadow-lg), 0 0 30px rgba(var(--glow), .12);
}

/* ===== 10. 欢迎页热门模型快捷芯片 ===== */
.model-quick {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
}
.model-quick .mq-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-right: 2px;
}
.mq-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(43, 56, 93, .06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mq-chip svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.mq-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--glow), .4);
  color: var(--text);
  box-shadow: 0 10px 22px rgba(var(--glow), .14);
}
.mq-chip.active {
  color: var(--primary);
  border-color: transparent;
  background:
    linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: 0 8px 22px rgba(var(--glow), .22), var(--glow-shadow);
}
/* hover 抬升 / 3D 倾斜统一过渡（data-tilt 脚本改写 transform 时平滑跟随） */
.suggest-card,
.mq-chip {
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}

/* ===== 11. 全屏拖拽上传蒙层 ===== */
.drop-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(var(--glow), .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 260;
  pointer-events: none;
}
.drop-overlay.show { display: flex; }
.drop-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 56px;
  border: 2.5px dashed rgba(var(--glow), .55);
  border-radius: 26px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg), var(--glow-shadow);
  text-align: center;
  animation: dropPop .25s var(--ease-spring);
}
.drop-overlay-inner svg { width: 46px; height: 46px; color: var(--primary); }
.drop-overlay-inner b { font-size: 16px; font-weight: 800; color: var(--text); }
.drop-overlay-inner small { font-size: 12px; color: var(--text-secondary); }
@keyframes dropPop { from { opacity: 0; transform: scale(.92); } }

/* ===== 12. 首屏编排动画（仅桌面端，避免与移动端侧栏 off-canvas transform 冲突） ===== */
@media (min-width: 769px) {
  @keyframes sideIn {
    from { opacity: 0; transform: translateX(-24px); }
  }
  @keyframes fadeDown {
    from { opacity: 0; transform: translateY(-10px); }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
  }
  .sidebar { animation: sideIn .5s var(--ease-out) backwards; }
  .main-header { animation: fadeDown .45s .1s var(--ease-out) backwards; }
  .input-area { animation: fadeUp .45s .16s var(--ease-out) backwards; }
}

/* ===== 12b. 余额不足截断提示（区分于普通"继续"提示的红色系） ===== */
.output-limit-warning.balance {
  color: #b91c1c;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-color: #fca5a5;
}
html[data-theme="dark"] .output-limit-warning.balance {
  color: #fecaca;
  background: rgba(127, 29, 29, .28);
  border-color: rgba(248, 113, 113, .35);
}

/* ===== 13. prefers-reduced-motion：全部动效停用（fx 守卫见第 0 节） ===== */
@media (prefers-reduced-motion: reduce) {
  .welcome::before,
  .welcome::after,
  .welcome-logo,
  .wl-ring::before,
  .wb-dot,
  .welcome-hero > *:not(.welcome-logo),
  .suggest-card,
  .mq-chip,
  .msg.msg-enter,
  .input-box.is-streaming::before,
  .copy-btn.copied svg,
  .md-table-copy.copied svg,
  .user-copy-btn.copied svg,
  .assistant-copy-btn.copied svg,
  .drop-overlay-inner,
  .sidebar,
  .main-header,
  .input-area {
    animation: none !important;
  }
}

/* ===== 14. 移动端适配 ===== */
@media (max-width: 768px) {
  /* 沿用既有决定：移动端 logo 不做漂浮/光晕，入场动画也一并关闭 */
  .welcome-logo { animation: none; }
  .wl-ring::before { animation: none; }
  .suggest-card { animation-duration: .4s; }
  .mq-chip { animation-duration: .35s; }
  .input-box.is-streaming::before { border-radius: 20px; }
  .scroll-bottom-btn { right: 14px; bottom: 118px; width: 38px; height: 38px; }
  .drop-overlay-inner { padding: 26px 34px; }
}
@media (max-width: 600px) {
  .code-dots { display: none; }
}