/* ============================================================================
   glass.css —— 前端「毛玻璃」视觉层
   ----------------------------------------------------------------------------
   站主要求：「简化版做成毛玻璃形式设计」「两边的引导页用点毛玻璃」。
   实现要点（glassmorphism 三件套）：
     · 半透明底 + backdrop-filter 模糊（毛玻璃的本体）
     · 1px 高光描边（模拟玻璃边缘）
     · 大而柔的投影（把玻璃「托」起来）
   为了让「毛玻璃」看得出来，底下必须**有东西可透** ——
   所以同时加了一层缓慢流动的渐变光斑背景，否则玻璃会显得像纯色块。

   为什么单独一个文件：styles.css 是前台和后台共用的，
   直接改会连带把后台也变成半透明，后台信息密度高、那样反而看不清。
   这里只被前端页面（chat.html / login.html）引入。

   性能与兼容：
     · backdrop-filter 在旧内核里无效 → 自动退化成纯半透明背景（不会白屏）
     · 尊重 prefers-reduced-motion，关掉背景动画
   ========================================================================== */

:root {
  --gl-bg:      rgba(19, 22, 31, .58);
  --gl-bg-2:    rgba(28, 32, 44, .52);
  --gl-bg-3:    rgba(255, 255, 255, .06);
  --gl-border:  rgba(255, 255, 255, .12);
  --gl-border-2:rgba(255, 255, 255, .07);
  --gl-blur:    saturate(165%) blur(18px);
  --gl-shadow:  0 10px 34px -14px rgba(0, 0, 0, .78), 0 2px 8px -4px rgba(0, 0, 0, .5);
  --gl-hi:      inset 0 1px 0 rgba(255, 255, 255, .09);
}

/* 浅色模式下把玻璃调亮，否则文字对比度不够 */
html[data-mode="light"] {
  --gl-bg:     rgba(255, 255, 255, .62);
  --gl-bg-2:   rgba(255, 255, 255, .55);
  --gl-bg-3:   rgba(0, 0, 0, .04);
  --gl-border: rgba(255, 255, 255, .75);
  --gl-border-2: rgba(0, 0, 0, .06);
  --gl-shadow: 0 10px 34px -16px rgba(31, 41, 55, .30), 0 2px 8px -4px rgba(31, 41, 55, .16);
  --gl-hi:     inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ------------------------------------------------- 背景：缓慢流动的光斑 */
body::before {
  content: ''; position: fixed; inset: -20% -20% -20% -20%; pointer-events: none; z-index: -1;
  background:
    radial-gradient(48% 42% at 18% 22%, rgba(79, 124, 255, .30), transparent 62%),
    radial-gradient(44% 40% at 82% 28%, rgba(168, 85, 247, .26), transparent 64%),
    radial-gradient(52% 46% at 62% 82%, rgba(16, 185, 129, .22), transparent 66%),
    radial-gradient(40% 38% at 26% 84%, rgba(244, 114, 182, .20), transparent 66%);
  filter: blur(28px);
  animation: gw-glass-drift 26s ease-in-out infinite alternate;
}
@keyframes gw-glass-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}

/* ------------------------------------------------------------ 侧边栏 */
.sidebar {
  background: var(--gl-bg) !important;
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border-right: 1px solid var(--gl-border) !important;
  box-shadow: var(--gl-shadow), var(--gl-hi);
}

/* 侧栏里的操作项做成一片片小玻璃 */
.side-item,
.side-collapse {
  background: var(--gl-bg-3) !important;
  border: 1px solid var(--gl-border-2) !important;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  transition: .16s;
}
.side-item:hover,
.side-collapse:hover {
  background: rgba(255, 255, 255, .12) !important;
  border-color: var(--gl-border) !important;
}

/* 会话条目 */
.conv-item { border: 1px solid transparent; }
.conv-item:hover { background: var(--gl-bg-3) !important; border-color: var(--gl-border-2); }
.conv-item.on { background: var(--primary-soft) !important; border-color: var(--primary-line, var(--gl-border)); }

/* 钱包/额度卡 */
.wallet-bar {
  background: var(--gl-bg-2) !important;
  border: 1px solid var(--gl-border) !important;
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border-radius: 12px;
  box-shadow: var(--gl-shadow), var(--gl-hi);
}

/* ------------------------------------------------------------ 顶栏 */
.head {
  background: var(--gl-bg) !important;
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border-bottom: 1px solid var(--gl-border) !important;
  box-shadow: 0 6px 22px -14px rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------- 气泡 */
.bubble.assistant {
  background: var(--gl-bg-2) !important;
  border: 1px solid var(--gl-border) !important;
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  box-shadow: var(--gl-shadow), var(--gl-hi);
}
.bubble.user {
  box-shadow: 0 8px 24px -14px var(--primary-glow, rgba(79, 124, 255, .8));
}
.bubble .bb-speak {
  background: var(--gl-bg-3) !important;
  border: 1px solid var(--gl-border-2) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* -------------------------------------------------- 弹窗 / 抽屉 / 遮罩 */
.modal {
  background: var(--gl-bg) !important;
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border: 1px solid var(--gl-border) !important;
  box-shadow: 0 24px 70px -24px rgba(0, 0, 0, .85), var(--gl-hi) !important;
}
.modal-mask { background: rgba(8, 10, 16, .46) !important; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-head, .modal-foot { border-color: var(--gl-border) !important; }
.drawer, .shop-drawer { background: var(--gl-bg) !important; backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); }

/* 卡片 */
.card {
  background: var(--gl-bg-2) !important;
  border: 1px solid var(--gl-border) !important;
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  box-shadow: var(--gl-shadow), var(--gl-hi);
}

/* 支付方式选项 */
.pay-ch {
  background: var(--gl-bg-3) !important;
  border: 1px solid var(--gl-border-2) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pay-ch.on { border-color: var(--primary) !important; background: var(--primary-soft) !important; }

/* 输入区 */
.composer, .input-bar {
  background: var(--gl-bg) !important;
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  border-top: 1px solid var(--gl-border) !important;
}

/* 页脚（含后台自定义 HTML 那块）也当一块玻璃 */
#gwCustomHtml, .site-meta {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ================================================== 引导页（落地页）====
   站主要求：字体不要单一颜色、卡片要有交互、要高级透明毛玻璃。
   做法：
     · 标题用三色渐变 + 逐字发光；副标题金色描边
     · 每个特性卡给不同色相（nth-child 循环），图标跟着染色
     · 卡片 hover：上浮 + 放大图标 + 边框高亮 + 光晕
     · 玻璃做三层：底、渐变高光、上沿细线，比单层 backdrop-filter 通透得多
   ===================================================================== */
#landingView {
  /* 站主反馈「玻璃显得比较暗」—— 底色从近黑 rgba(8,10,16,.62) 提亮成中性灰蓝，
     再叠一层白色高光渐变，玻璃才通透。 */
  background:
    radial-gradient(58% 44% at 50% -6%, rgba(120, 160, 255, .42), transparent 66%),
    radial-gradient(46% 38% at 8% 98%, rgba(186, 120, 255, .34), transparent 64%),
    radial-gradient(46% 38% at 94% 92%, rgba(60, 220, 180, .30), transparent 64%),
    linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 45%, rgba(255,255,255,.09)),
    rgba(46, 52, 68, .55) !important;
  backdrop-filter: saturate(170%) blur(8px);
  -webkit-backdrop-filter: saturate(170%) blur(8px);
}

/* 玻璃主体：三层叠加 = 通透感 */
#landingView .landing-inner {
  position: relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.12) 45%, rgba(255,255,255,.22)) !important;
  border: 1px solid rgba(255, 255, 255, .48) !important;
  border-radius: 26px !important;
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow:
    0 40px 100px -34px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255, 255, 255, .70) !important;
  animation: gwLandIn .5s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes gwLandIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* 上沿一道流动高光 */
#landingView .landing-inner::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  pointer-events: none;
}
/* 右上角一团柔光，让玻璃"有厚度" */
#landingView .landing-inner::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
}

/* ---- 多彩标题：三色渐变 + 轻微发光 ---- */
#landingView .landing-title {
  background: linear-gradient(100deg, #1d3557 2%, #3b6ef5 30%, #8b5cf6 60%, #0ea5a0 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: .6px;
  filter: drop-shadow(0 2px 12px rgba(120, 150, 255, .30));
}
#landingView .landing-sub {
  color: #8a5a00 !important;                 /* 白玻璃上金色要压深一点才读得清 */
  font-weight: 600; letter-spacing: .4px;
}
#landingView .landing-intro { color: #2b3550 !important; }
#landingView .landing-intro strong { color: #1d4ed8; }
#landingView .landing-note { color: #4a5570 !important; }

/* ---- 特性卡：多彩 + 交互 ---- */
#landingView .landing-feats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
#landingView .landing-feat {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.34) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), border-color .22s, box-shadow .22s, background .22s;
  will-change: transform;
}
/* 每张卡一个色相：蓝 / 紫 / 绿 / 橙 / 粉 / 青 */
#landingView .landing-feat:nth-child(6n+1) { --lc: 88, 132, 255; }
#landingView .landing-feat:nth-child(6n+2) { --lc: 168, 85, 247; }
#landingView .landing-feat:nth-child(6n+3) { --lc: 16, 185, 129; }
#landingView .landing-feat:nth-child(6n+4) { --lc: 249, 115, 22; }
#landingView .landing-feat:nth-child(6n+5) { --lc: 244, 114, 182; }
#landingView .landing-feat:nth-child(6n)   { --lc: 6, 182, 212; }
/* 入场：逐张浮现，避免"一下子全冒出来"的生硬感 */
#landingView .landing-feat { opacity: 0; transform: translateY(12px); animation: gwFeatUp .5s cubic-bezier(.2,.8,.3,1) forwards; }
#landingView .landing-feat:nth-child(1) { animation-delay: .04s; }
#landingView .landing-feat:nth-child(2) { animation-delay: .10s; }
#landingView .landing-feat:nth-child(3) { animation-delay: .16s; }
#landingView .landing-feat:nth-child(4) { animation-delay: .22s; }
#landingView .landing-feat:nth-child(5) { animation-delay: .28s; }
#landingView .landing-feat:nth-child(6) { animation-delay: .34s; }
@keyframes gwFeatUp { to { opacity: 1; transform: none; } }
/* 每张卡左上角一团同色光晕 */
#landingView .landing-feat::before {
  content: ''; position: absolute; left: -30px; top: -30px; width: 120px; height: 120px;
  border-radius: 50%; pointer-events: none; opacity: .55;
  background: radial-gradient(circle, rgba(var(--lc), .38), transparent 70%);
  transition: opacity .22s;
}
#landingView .landing-feat:hover {
  transform: translateY(-6px) scale(1.025);
  border-color: rgba(var(--lc), .75) !important;
  background: rgba(255,255,255,.55) !important;
  box-shadow: 0 20px 44px -18px rgba(var(--lc), .85), inset 0 1px 0 rgba(255,255,255,.9);
}
#landingView .landing-feat:hover::before { opacity: .9; }
#landingView .landing-feat:hover .landing-feat-ic { transform: scale(1.12) rotate(-6deg); }
#landingView .landing-feat b { color: #141b2e; }
#landingView .landing-feat > span:last-child { color: #3c475f; }

/* 图标：跟卡片同色 */
#landingView .landing-feat-ic {
  border-radius: 12px !important;
  background: linear-gradient(140deg, rgba(var(--lc), .95), rgba(var(--lc), .55)) !important;
  box-shadow: 0 10px 24px -10px rgba(var(--lc), .9);
  transition: transform .22s cubic-bezier(.2,.8,.3,1);
}

/* 媒体区 */
#landingView .landing-media.default {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* 按钮：主按钮三色渐变 + 悬浮位移；次按钮玻璃 */
#landingView .landing-cta {
  border-radius: 999px !important;
  background: linear-gradient(100deg, #4f7cff, #8b5cf6 55%, #06b6d4) !important;
  border: none !important;
  box-shadow: 0 14px 38px -12px rgba(120, 130, 255, .95) !important;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
#landingView .landing-cta:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.08);
  box-shadow: 0 20px 46px -14px rgba(140, 150, 255, 1) !important; }
#landingView .landing-skip {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .18s, transform .18s;
}
#landingView .landing-skip:hover { background: rgba(255,255,255,.14) !important; transform: translateY(-1px); }

/* 尊重「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  #landingView .landing-inner { animation: none !important; }
  #landingView .landing-feat, #landingView .landing-feat-ic { transition: none !important; }
}

/* 登录/注册卡片（也是「引导」的第一眼） */
.auth-card {
  background: var(--gl-bg) !important;
  border: 1px solid var(--gl-border) !important;
  border-radius: 20px !important;
  backdrop-filter: var(--gl-blur);
  -webkit-backdrop-filter: var(--gl-blur);
  box-shadow: 0 26px 70px -28px rgba(0, 0, 0, .85), var(--gl-hi) !important;
}
.auth-wrap { background: transparent !important; }

/* 协议弹窗里的卡片同样走玻璃 */
.auth-tabs button.on {
  background: var(--gl-bg-3) !important;
  border-radius: 9px;
}

/* 输入框：淡淡的玻璃内凹感 */
.field input, .field select, .field textarea {
  background: var(--gl-bg-3) !important;
  border: 1px solid var(--gl-border-2) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* 老内核不支持 backdrop-filter 时的兜底：给足不透明度，保证可读 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .head, .bubble.assistant, .modal, .card, .wallet-bar, .auth-card, .composer, .input-bar {
    background: rgba(19, 22, 31, .94) !important;
  }
  html[data-mode="light"] .sidebar,
  html[data-mode="light"] .head,
  html[data-mode="light"] .bubble.assistant,
  html[data-mode="light"] .modal,
  html[data-mode="light"] .card,
  html[data-mode="light"] .auth-card {
    background: rgba(255, 255, 255, .96) !important;
  }
}