/* ============ 移动智能 设计系统（补充 Tailwind CDN）============ */

/* 文本截断 */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 卡片悬停上浮（Chatnex 风）---------- */
.card-hover { transition: transform .4s ease, box-shadow .4s ease, border-color .3s ease; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 14px 30px rgba(39,119,252,.14); border-color: rgba(39,119,252,.35); }
@media (prefers-reduced-motion: reduce) { .card-hover:hover { transform: none; } }

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.no-scrollbar::-webkit-scrollbar { display: none; }

#messages::-webkit-scrollbar { width: 6px; }
#messages::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
textarea { max-height: 200px; }

/* ---------- 动效 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp .55s cubic-bezier(.2,.7,.3,1) both; }
.fade-up.d1 { animation-delay: .08s; }
.fade-up.d2 { animation-delay: .16s; }
.fade-up.d3 { animation-delay: .24s; }
/* 兜底：禁用动效时不能让内容停在 opacity:0 而不可见 */
@media (prefers-reduced-motion: reduce) {
  .fade-up { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes drift { 0% { transform: translateX(-2%); } 100% { transform: translateX(2%); } }
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* ---------- 沉浸式 Hero（改为 Chatnex 浅蓝渐变）---------- */
.hero-immersive {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(55% 60% at 12% 0%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #e8f1ff 0%, #eef5ff 50%, #f5f9ff 100%);
}
/* 发光球（浅蓝柔光）*/
.glow { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .5; z-index: -1; }
.glow-1 { width: 460px; height: 460px; background: #bcd6ff; top: -160px; left: -80px; animation: floaty 9s ease-in-out infinite; }
.glow-2 { width: 380px; height: 380px; background: #9cc2ff; bottom: -160px; right: -60px; animation: floaty 11s ease-in-out infinite; }
.glow-3 { width: 220px; height: 220px; background: #2777fc; opacity: .12; top: 40px; right: 22%; animation: floaty 13s ease-in-out infinite; }

/* 底部波浪（中国移动律动） */
.hero-waves { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 90px; z-index: 0; }

/* ---------- 白色输入卡（Hero 主输入）---------- */
.glass {
  background: #fff;
  border: 1px solid var(--cn-border, #e7edf9);
  box-shadow: 0 26px 60px -26px rgba(39,119,252,.30), 0 2px 0 rgba(255,255,255,.6) inset;
}

/* ---------- 强调蓝文字（Chatnex 高亮词）---------- */
.text-grad { background: linear-gradient(90deg,#2777fc,#5a8dff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- 作品广场缩略图渐变 ---------- */
.thumb { position: relative; overflow: hidden; }
.thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35)); }
.masonry { columns: 1; column-gap: 1rem; }
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
@media (min-width: 1280px) { .masonry { columns: 4; } }
.masonry > * { break-inside: avoid; margin-bottom: 1rem; }

/* 选中态卡片描边光 */
.ring-brandglow { box-shadow: 0 0 0 2px #0089d0, 0 10px 30px -8px rgba(0,137,208,.5); }

/* ---------- Markdown 正文（聊天回复）---------- */
.md-body { color: #334155; line-height: 1.7; word-break: break-word; }
.md-body > *:first-child { margin-top: 0; }
.md-body > *:last-child { margin-bottom: 0; }
.md-body p { margin: .5rem 0; }
.md-body h1, .md-body h2, .md-body h3 { font-weight: 700; margin: .9rem 0 .5rem; line-height: 1.3; }
.md-body h1 { font-size: 1.25rem; } .md-body h2 { font-size: 1.12rem; } .md-body h3 { font-size: 1rem; }
.md-body ul, .md-body ol { margin: .5rem 0; padding-left: 1.4rem; }
.md-body ul { list-style: disc; } .md-body ol { list-style: decimal; }
.md-body li { margin: .2rem 0; }
.md-body a { color: #0089d0; text-decoration: underline; }
.md-body code { background: #e8eef4; color: #0a5ca0; padding: .1em .4em; border-radius: 4px; font-size: .88em; }
.md-body pre { background: #0f223a; color: #e2e8f0; padding: .9rem 1rem; border-radius: 10px; overflow-x: auto; margin: .6rem 0; }
.md-body pre code { background: transparent; color: inherit; padding: 0; }
.md-body blockquote { border-left: 3px solid #99d3ef; padding-left: .8rem; color: #64748b; margin: .6rem 0; }
.md-body table { border-collapse: collapse; margin: .6rem 0; width: 100%; }
.md-body th, .md-body td { border: 1px solid #e2e8f0; padding: .4rem .6rem; text-align: left; }
.md-body th { background: #f1f5f9; }
.md-body small { color: #94a3b8; }

/* ---------- 网页生成加载动画 ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.wg-spinner {
  width: 76px; height: 76px; border-radius: 50%;
  background: conic-gradient(from 0deg, #0089d0, #19a3df, #86c440, #0089d0);
  -webkit-mask: radial-gradient(closest-side, #0000 67%, #000 69%);
  mask: radial-gradient(closest-side, #0000 67%, #000 69%);
  animation: spin 1.1s linear infinite;
}
@keyframes dpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } }
.dot-pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #0089d0; animation: dpulse 1s ease-in-out infinite; }
/* 流式代码区 */
.codestream { font-family: ui-monospace, Menlo, Consolas, monospace; line-height: 1.5; }
.codestream::-webkit-scrollbar { width: 5px; }
.codestream::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }


/* ============================================================
   Chatnex 设计系统 v6  ——  借鉴 Chatnex AI 模板（Urbanist / #2777fc）
   纯白 + 黑 + 强调蓝，浅蓝卡片底，10px 圆角，柔和阴影，滚动渐显
   说明：沿用既有类名（glass-* / btn-* / nav-link）就地重定义为新风格
   ============================================================ */
:root {
  --cn-accent: #2777fc;          /* 强调蓝 */
  --cn-accent-rgb: 39,119,252;
  --cn-ink: #0b1020;             /* 近黑（标题）*/
  --cn-text: #5f5f5f;            /* 正文灰 */
  --cn-soft: #f2f7ff;            /* 浅蓝卡片/分区底 */
  --cn-border: #e7edf9;          /* 浅描边 */
  --cn-shadow: 2px 0 50px rgba(0,0,0,.05);
  --cn-shadow-hover: 0 14px 30px rgba(39,119,252,.14);
}

/* ---------- 浅蓝渐变 Banner（首页/二级页大图，复刻无法下载的背景）---------- */
.cn-banner {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 70% at 82% 38%, rgba(39,119,252,.10), transparent 70%),
    radial-gradient(50% 60% at 12% 0%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #e8f1ff 0%, #eef5ff 45%, #f5f9ff 100%);
}
/* 左上角柔光大圆 */
.cn-banner::before {
  content: ""; position: absolute; top: 30px; left: 40px; width: 540px; height: 540px;
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 68%);
}

/* ---------- 卡片：浅蓝渐变底 + 大圆角 + 柔和阴影 + 悬停上浮（Chatnex feature-box）---------- */
.glass-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 62%);
  border: 1px solid #eef2fb;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(16,40,80,.04);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease, border-color .35s ease, background .45s ease;
}
/* 悬停：上浮 + 蓝色光晕 + 顶部高光带 */
.glass-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 60% at 50% 0%, rgba(39,119,252,.10), transparent 70%);
  transition: opacity .45s ease;
}
.glass-card > * { position: relative; z-index: 1; }
.glass-card:hover {
  transform: translateY(-8px);
  border-color: rgba(39,119,252,.28);
  box-shadow: 0 26px 50px -22px rgba(39,119,252,.38);
}
.glass-card:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .glass-card:hover { transform: none; } }

/* 右上角箭头按钮：悬停整卡时变蓝、箭头转白（Chatnex 标志交互）*/
.card-arrow {
  position: absolute; top: 14px; right: 14px; z-index: 2; pointer-events: none;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--cn-ink); border-radius: 14px;
  box-shadow: 0 6px 16px rgba(16,40,80,.08);
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
.glass-card:hover .card-arrow { background: var(--cn-accent); color: #fff; }
.glass-card:hover .card-arrow svg { transform: translate(1px,-1px); }
.card-arrow svg { transition: transform .35s ease; }

/* 静态面板（表单 / 登录卡）*/
.glass-surface {
  background: #fff; border: 1px solid var(--cn-border);
  border-radius: 20px; box-shadow: 0 20px 60px -28px rgba(39,119,252,.25);
}

/* ---------- 导航栏：纯白 + 顶部 2px 蓝线 ---------- */
.glass-nav {
  background: #fff;
  border-top: 2px solid var(--cn-accent);
  border-bottom: 1px solid #eef1f6;
  box-shadow: 0 1px 2px rgba(11,16,32,.04);
}
/* 导航链接下划线（从左滑入）*/
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1.5px;
  background: var(--cn-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* ---------- 下拉菜单：白底 + 大柔影 ---------- */
.glass-menu {
  background: #fff; border: 1px solid var(--cn-border);
  box-shadow: 0 0 100px rgba(0,0,0,.15); border-radius: 12px;
}

/* ---------- 输入框：白底，聚焦蓝边 ---------- */
.glass-input {
  background: #fff; border: 1px solid var(--cn-border);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.glass-input:focus, .glass-input:focus-within {
  outline: none; border-color: var(--cn-accent);
  box-shadow: 0 1px 10px rgba(39,119,252,.16);
}

/* ---------- 胶囊（分类/标签）---------- */
.glass-pill {
  background: var(--cn-soft); color: var(--cn-text); border: 1px solid transparent;
  font-weight: 600;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.glass-pill:hover { transform: translateY(-2px); color: var(--cn-accent); box-shadow: 0 8px 18px -10px rgba(39,119,252,.5); }
.glass-pill.is-active {
  background: var(--cn-accent); color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -8px rgba(39,119,252,.55);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border-radius: 10px; font-weight: 700; cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background-color .5s ease, color .5s ease, border-color .3s ease;
}
.btn:active { transform: scale(.97); }
/* 主按钮：实心蓝 → 悬停反白（Chatnex primary_btn）*/
.btn-primary { background: var(--cn-accent); color: #fff; box-shadow: 0 12px 26px -12px rgba(39,119,252,.6); }
.btn-primary:hover { background: var(--cn-ink); color: #fff; transform: translateY(-2px); }
/* 次按钮：白底 → 悬停变黑（Chatnex secondary_btn）*/
.btn-ghost { background: #fff; border: 1px solid var(--cn-border); color: var(--cn-ink); }
.btn-ghost:hover { background: var(--cn-ink); color: #fff; transform: translateY(-2px); }
/* 主按钮高光扫过 */
.btn-glow { position: relative; overflow: hidden; }
.btn-glow::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
}
.btn-glow:hover::after { animation: sheen 1s ease; }
@keyframes sheen { 0% { left: -80%; opacity: 0; } 18% { opacity: 1; } 100% { left: 130%; opacity: 0; } }

/* ---------- 参考图层叠堆（studio）---------- */
.stack-thumb { transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; }
.stack-thumb:hover { transform: rotate(0deg) scale(1.08) translateY(-5px) !important; z-index: 50 !important; box-shadow: 0 14px 26px rgba(16,40,80,.22); }

/* ---------- 小标题 eyebrow ---------- */
.special-text { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cn-accent); }

/* ---------- 滚动渐显（替代 Chatnex 的 WOW.js）---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- 机器人漂浮 + 悬浮对话气泡 ---------- */
.floaty-robot { animation: floatY 3.6s ease-in-out infinite; will-change: transform; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.coment-pop { opacity: 0; transform: scale(.85) translateY(10px); animation: popIn .6s ease-out forwards; }
.coment-pop.d1 { animation-delay: .5s; } .coment-pop.d2 { animation-delay: 1s; }
@keyframes popIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .floaty-robot { animation: none; } .coment-pop { opacity: 1; transform: none; animation: none; } }

/* ---------- 回到顶部（脉冲，Chatnex 标志性）---------- */
#backTop {
  position: fixed; bottom: 38px; right: 38px; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cn-accent); color: #fff; border: 0; border-radius: 14px; cursor: pointer;
  opacity: 0; visibility: hidden; z-index: 60;
  transition: opacity .4s, visibility .4s, transform .3s; animation: spineer 2s infinite;
}
#backTop.show { opacity: 1; visibility: visible; }
#backTop:hover { transform: translateY(-5px); }
@keyframes spineer { from { box-shadow: 0 0 0 0 rgba(39,119,252,.4); } to { box-shadow: 0 0 0 24px rgba(39,119,252,0); } }
@media (prefers-reduced-motion: reduce) { #backTop { animation: none; } }

/* ---------- 滚动条 ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(39,119,252,.35) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(39,119,252,.30); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(39,119,252,.55); background-clip: padding-box; }