/* ============================================================
   SNOW · 晓雪
   视觉基调：深夜冰层。低明度冷色打底，只用一条冰蓝→紫的渐变做强调，
   其余全部靠层级、留白和一条极细的高光线撑住质感。
   ============================================================ */

:root{
  /* 底色 */
  --bg:#06090f;
  --ink:#eaf1f8;
  --ink-2:#a3b5ca;
  --ink-3:#6c7f96;
  --dim:#46566a;

  /* 线 */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);

  /* 强调色（app.js 有内联引用，变量名不能改） */
  --ac:#7cc4f5;
  --ac2:#cbe6fb;
  --ok:#6fd3a8;
  --warn:#e0b884;
  --tx2:#a9bacd;

  --violet:#a78bfa;
  --grad:linear-gradient(135deg,#eaf6ff 0%,#93d2f7 45%,#a78bfa 100%);
  --r:16px;
  --side:252px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}

body{
  background:
    radial-gradient(1100px 560px at 84% -8%, rgba(88,150,235,.20), transparent 62%),
    radial-gradient(820px 460px at 4% 4%,  rgba(140,110,235,.13), transparent 58%),
    radial-gradient(900px 620px at 50% 112%, rgba(40,190,170,.08), transparent 62%),
    var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 极细噪点，压住纯色渐变的"塑料感" */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}
::selection{background:rgba(124,196,245,.28)}

.app{display:flex;min-height:100vh;position:relative;z-index:1}

/* ============ 侧栏 ============ */
.side{
  width:var(--side);flex:0 0 var(--side);
  padding:26px 14px 22px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,0) 40%);
}

/* --- logo --- */
.brand{display:flex;align-items:center;gap:11px;padding:2px 10px 0;margin-bottom:26px}
.logo-mark{
  width:36px;height:36px;flex:none;
  filter:drop-shadow(0 0 9px rgba(124,196,245,.45));
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.brand:hover .logo-mark{transform:rotate(60deg)}
.brand-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-txt b{
  font-size:16px;font-weight:500;letter-spacing:.3em;color:#fff;
  font-feature-settings:"tnum";
}
.brand-txt em{
  font-style:normal;font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);margin-top:3px;
}

/* --- 导航 --- */
#nav{display:flex;flex-direction:column;gap:1px}
.nav-label{
  font-size:9.5px;letter-spacing:.26em;color:var(--dim);
  padding:0 12px;margin:16px 0 6px;
}
.nav-label:first-child{margin-top:0}

#nav a{
  display:flex;align-items:center;gap:11px;
  height:38px;padding:0 11px;border-radius:10px;
  color:var(--ink-2);font-size:13.5px;letter-spacing:.02em;
  position:relative;transition:background .18s,color .18s;
}
#nav a .ico{
  width:18px;height:18px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  color:var(--dim);transition:color .18s,transform .18s;
}
#nav a:hover{background:rgba(255,255,255,.045);color:var(--ink)}
#nav a:hover .ico{color:var(--ink-2)}
#nav a.on{
  color:#fff;
  background:linear-gradient(90deg,rgba(124,196,245,.17),rgba(124,196,245,.03));
  box-shadow:inset 0 0 0 1px rgba(124,196,245,.20),0 0 24px -14px rgba(124,196,245,.9);
}
#nav a.on .ico{color:var(--ac);transform:scale(1.06)}
#nav a.on::before{
  content:"";position:absolute;left:-14px;top:11px;bottom:11px;width:2px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,var(--ac),var(--violet));
}

/* --- 侧栏页脚 --- */
.side-foot{
  margin-top:auto;display:flex;gap:8px;align-items:flex-start;
  padding:12px 11px 0;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.75;color:var(--dim);letter-spacing:.03em;
}
.side-foot svg{
  width:14px;height:14px;flex:none;margin-top:3px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;color:var(--ink-3);
}

/* ============ 主区 ============ */
/* 主区用 flex 撑满视口，聊天页靠 flex:1 贴到底部，不跟 vh 算术纠缠 */
.main{flex:1;min-width:0;padding:40px 46px 90px;display:flex;flex-direction:column}
/* 聊天页必须钉死视口高度，否则 .chat 会随内容长高、整页跟着滚。
   不用 100vh 算——不同环境下 vh 与真实视口对不上，直接贴死四边最稳。 */
.main-chat{
  position:fixed;top:0;right:0;bottom:0;left:var(--side);
  padding:40px 46px 22px;overflow:hidden;
}
.wrap{width:100%;max-width:1040px;margin:0 auto}

.page-h{margin-bottom:28px}
.page-h h1{
  font-size:29px;font-weight:300;letter-spacing:.01em;color:#fff;line-height:1.35;
}
.page-h p{font-size:13px;color:var(--ink-3);margin-top:7px;letter-spacing:.01em}

/* ============ 卡片 ============ */
.card{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.014));
  border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;margin-bottom:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.055) inset,0 30px 60px -46px rgba(0,0,0,.95);
  transition:border-color .2s,transform .2s;
}
.card::after{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,196,245,.42),transparent);
  opacity:.7;
}
.card h3{
  font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--ink-3);
  margin-bottom:16px;
}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch}
.grid > .card,.col > .card{margin-bottom:0}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}

/* 卡片内小构件 */
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.card-hd h3{margin-bottom:0}
.pill{
  font-size:10.5px;letter-spacing:.06em;padding:2.5px 9px;border-radius:20px;
  color:var(--ink-3);border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-feature-settings:"tnum";white-space:nowrap;
}
.spark{margin:6px -6px 4px;opacity:.95}

.empty-box{
  display:flex;flex-direction:column;align-items:flex-start;gap:13px;
  padding:8px 0 2px;
}
.empty-box p{font-size:12.5px;color:var(--ink-3);line-height:1.85}

.act{display:flex;align-items:center;gap:10px;min-width:0}
.act-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-t.on{color:var(--ink-3)}
.tick{width:17px;height:17px;flex:none;fill:none;stroke:var(--dim);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.tick.on{stroke:var(--ok);filter:drop-shadow(0 0 5px rgba(111,211,168,.45))}
.ok-txt{color:var(--ok);font-size:12.5px}

.card.cta{display:flex;align-items:center;justify-content:space-between;gap:20px}
.card.cta > div{min-width:0}
/* 竖排的行动召唤卡：文字在上，按钮在下 */
.card.cta-v{flex:1;display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;gap:14px;
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(124,196,245,.13),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014))}

/* 数字 */
.big{
  font-size:46px;font-weight:200;line-height:1.08;letter-spacing:-.01em;
  font-feature-settings:"tnum";
  background:linear-gradient(180deg,#ffffff 10%,#a8c8e2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.big small{
  font-size:13px;font-weight:400;letter-spacing:0;margin-left:7px;
  -webkit-text-fill-color:var(--ink-3);color:var(--ink-3);
}

/* 键值行 */
.kv{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 0;font-size:14px;color:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.kv:first-of-type{border-top:1px solid rgba(255,255,255,.055)}
.kv:last-child{border-bottom:none}
.kv span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv span:last-child{color:var(--ink-3);font-size:13px;flex:none}
.card > .kv:first-of-type{border-top:none}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:36px;padding:0 18px;border-radius:10px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  color:var(--ac2);font-size:13.5px;font-family:inherit;letter-spacing:.02em;
  cursor:pointer;transition:.18s;white-space:nowrap;
}
.btn:hover{background:rgba(124,196,245,.12);border-color:rgba(124,196,245,.45);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.primary{
  border:none;color:#04121c;font-weight:600;
  background:linear-gradient(135deg,#bfe4fb,#7cc4f5 55%,#a78bfa 130%);
  box-shadow:0 6px 20px -10px rgba(124,196,245,.95);
}
.btn.primary:hover{filter:brightness(1.07);box-shadow:0 8px 26px -10px rgba(124,196,245,1)}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
.btn.sm{height:29px;padding:0 13px;font-size:12.5px;border-radius:8px}

/* ============ 对话 ============ */
.chat{display:flex;flex-direction:column;flex:1;min-height:0}

/* 身份标识放页头，不逐条重复 */
.chat-h{display:flex;align-items:center;gap:11px;padding:0 2px 15px;
  border-bottom:1px solid var(--line);margin-bottom:18px;flex:none}
.chat-mark{width:30px;height:30px;flex:none;filter:drop-shadow(0 0 8px rgba(124,196,245,.4))}
.chat-mark g{fill:none;stroke:url(#iceGrad);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chat-id{display:flex;flex-direction:column;line-height:1.4}
.chat-id b{font-size:13.5px;font-weight:500;letter-spacing:.12em;color:#fff}
.live{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-3);letter-spacing:.08em}
.live i{width:5px;height:5px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 8px var(--ok);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
.chat-note{margin-left:auto;font-size:10.5px;color:var(--dim);letter-spacing:.1em;white-space:nowrap}

.msgs{flex:1;overflow-y:auto;padding:4px 4px 20px;scroll-behavior:smooth}
.msgs::-webkit-scrollbar{width:5px}
.msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.msgs::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

.msg{display:flex;margin-bottom:22px;animation:in .38s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .b{
  max-width:76%;font-size:14.5px;line-height:1.88;
  white-space:pre-wrap;word-break:break-word;
}

.msg.u{justify-content:flex-end}
.msg.u .b{
  padding:11px 16px;border-radius:16px 16px 4px 16px;
  background:linear-gradient(135deg,rgba(124,196,245,.20),rgba(167,139,250,.14));
  border:1px solid rgba(124,196,245,.24);
  box-shadow:0 10px 24px -20px rgba(0,0,0,.9);
}

/* 助手：不加气泡，改用一枚雪点 + 左侧留白，让文字本身撑版面 */
.msg.a{position:relative;padding-left:30px}
.msg.a::before{
  content:"";position:absolute;left:2px;top:9px;
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#eaf6ff,#7cc4f5 60%,rgba(167,139,250,.55));
  box-shadow:0 0 12px rgba(124,196,245,.55);
}
.msg.a .b{color:#dce8f3;max-width:min(660px,76%)}
/* 身份已经写在页头，逐条重复反而吵 */
.msg.a .who{display:none}

.dots{display:inline-flex;gap:4px;padding:8px 0}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--ac);opacity:.3;animation:bounce 1.25s infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.95;transform:translateY(-3px)}}

/* 输入区 */
.hints{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.hint{
  padding:6px 13px;border:1px solid var(--line);border-radius:20px;
  font-size:12.5px;color:var(--ink-3);cursor:pointer;transition:.18s;
  background:rgba(255,255,255,.02);
}
.hint:hover{border-color:rgba(124,196,245,.45);color:var(--ac2);background:rgba(124,196,245,.09)}

.composer{
  display:flex;gap:10px;align-items:flex-end;
  padding:12px 12px 12px 16px;border-radius:18px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 50px -40px #000;
  transition:border-color .2s,background .2s;
}
.composer:focus-within{border-color:rgba(124,196,245,.42);background:rgba(124,196,245,.055)}
.composer textarea{
  flex:1;resize:none;background:transparent;border:none;outline:none;
  color:var(--ink);font-family:inherit;font-size:14.5px;line-height:1.65;
  max-height:130px;padding:7px 0;
}
.composer textarea::placeholder{color:var(--dim)}

/* ============ 列表 / 标签 ============ */
.item{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.055);cursor:pointer;transition:.16s}
.item:last-child{border-bottom:none}
.item:hover{padding-left:6px}
.item .t{font-size:14.5px;color:var(--ink);margin-bottom:5px}
.item .d{font-size:12.5px;color:var(--ink-3);line-height:1.7}

.tag{
  display:inline-block;font-size:10px;padding:1.5px 7px;border-radius:5px;
  border:1px solid var(--line-2);color:var(--ac);margin-right:6px;
  letter-spacing:.08em;vertical-align:1.5px;
}
.tag.a{border-color:rgba(111,211,168,.4);color:var(--ok)}
.tag.b{border-color:rgba(124,196,245,.4);color:var(--ac)}
.tag.c{border-color:rgba(224,184,132,.4);color:var(--warn)}

/* ============ 评估 ============ */
.opt{
  display:block;width:100%;text-align:left;padding:14px 17px;margin-bottom:9px;
  border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.028);
  color:var(--tx2);font-size:14px;font-family:inherit;cursor:pointer;transition:.16s;
}
.opt:hover{border-color:rgba(124,196,245,.45);color:#fff;background:rgba(124,196,245,.08)}
.opt.sel{border-color:var(--ac);background:rgba(124,196,245,.15);color:#fff}
.opt:disabled{cursor:default}

.q{font-size:16.5px;line-height:1.75;margin-bottom:20px;color:#f2f7fb;font-weight:300}
.prog{height:3px;background:rgba(255,255,255,.08);border-radius:3px;margin-bottom:26px;overflow:hidden}
.prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--ac),var(--violet));transition:width .35s}

/* ============ 杂项 ============ */
.tagline{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.75}
canvas{display:block;max-width:100%}
textarea,input{font-family:inherit}
.emp{color:var(--ink-3);font-size:13px;text-align:center;padding:44px 0}

:focus-visible{outline:2px solid rgba(124,196,245,.6);outline-offset:2px;border-radius:6px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============ 窄屏 ============ */
@media(max-width:820px){
  .app{flex-direction:column}
  .side{
    order:2;width:100%;flex:none;height:auto;position:fixed;
    bottom:0;left:0;right:0;top:auto;z-index:50;
    border-right:none;border-top:1px solid var(--line-2);
    background:rgba(8,12,19,.86);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    padding:7px 4px calc(7px + env(safe-area-inset-bottom));
  }
  .brand,.side-foot,.nav-label{display:none}
  #nav{flex-direction:row;justify-content:space-around;gap:0}
  #nav a{
    flex:1;flex-direction:column;gap:4px;height:auto;
    padding:5px 2px;font-size:10px;border-radius:9px;letter-spacing:0;
  }
  #nav a .ico{width:20px;height:20px}
  #nav a.on{background:none;box-shadow:none}
  #nav a.on::before{
    left:50%;top:auto;bottom:0;transform:translateX(-50%);
    width:16px;height:2px;border-radius:2px;
  }
  .main{order:1;padding:26px 18px 108px}
  .page-h h1{font-size:23px}
  .grid{grid-template-columns:1fr}
  .main-chat{left:0;padding:26px 18px calc(72px + env(safe-area-inset-bottom))}
  .chat{flex:1;min-height:0;height:auto;max-height:none}
  .chat-note{display:none}
  .card.cta{flex-direction:column;align-items:flex-start;gap:14px}
  .msg .b{max-width:86%}
  .msg.a .b{max-width:86%}
  .big{font-size:38px}
  .card{padding:19px 18px;border-radius:14px}
}