@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg-base:#eef3fa;
  --bg-card:#ffffff;
  --bg-card-lighter:#e4edf8;
  --bg-hover-card:#dce9fa;
  --text-1:#16273a;
  --text-2:#51637a;
  --text-3:#8a97a8;
  --text-bright:#0b1b2b;
  --border:#d7e2ef;
  --accent:#1c5fd6;
  --accent-strong:#0f4bc4;
  --accent-2:#0f9db8;
  --chip-bg: rgba(28,95,214,0.08);
  --chip-border: rgba(28,95,214,0.22);
  --chip-bg-hover: rgba(28,95,214,0.14);
  --glow: rgba(28,95,214,0.16);
  --glow-2: rgba(15,157,184,0.14);
  --bubble-user:#dbe8ff;
  --shadow-card: 0 1px 3px rgba(16,32,54,0.07), 0 8px 24px rgba(16,32,54,0.06);
  --shadow-hover: 0 4px 18px rgba(16,32,54,0.10);
  --radius-card:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-base:#0a1322;
    --bg-card:#111d33;
    --bg-card-lighter:#16233c;
    --bg-hover-card:#1a2a48;
    --text-1:#e6edfb;
    --text-2:#a3b3cc;
    --text-3:#6d7f9c;
    --text-bright:#ffffff;
    --border:#233355;
    --accent:#5b9dff;
    --accent-strong:#82b4ff;
    --accent-2:#43d6e8;
    --chip-bg: rgba(91,157,255,0.12);
    --chip-border: rgba(91,157,255,0.30);
    --chip-bg-hover: rgba(91,157,255,0.20);
    --glow: rgba(91,157,255,0.20);
    --glow-2: rgba(67,214,232,0.16);
    --bubble-user:#1c3a66;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.4);
    --shadow-hover: 0 8px 28px rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --bg-base:#0a1322;
  --bg-card:#111d33;
  --bg-card-lighter:#16233c;
  --bg-hover-card:#1a2a48;
  --text-1:#e6edfb;
  --text-2:#a3b3cc;
  --text-3:#6d7f9c;
  --text-bright:#ffffff;
  --border:#233355;
  --accent:#5b9dff;
  --accent-strong:#82b4ff;
  --accent-2:#43d6e8;
  --chip-bg: rgba(91,157,255,0.12);
  --chip-border: rgba(91,157,255,0.30);
  --chip-bg-hover: rgba(91,157,255,0.20);
  --glow: rgba(91,157,255,0.20);
  --glow-2: rgba(67,214,232,0.16);
  --bubble-user:#1c3a66;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.4);
  --shadow-hover: 0 8px 28px rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text-1);
  font-family:'IBM Plex Sans', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height:1.7;
  background:
    radial-gradient(560px circle at var(--spotlight-x,50vw) var(--spotlight-y,18vh), var(--glow), transparent 70%),
    radial-gradient(700px circle at calc(var(--spotlight-x,50vw) + 260px) calc(var(--spotlight-y,18vh) + 220px), var(--glow-2), transparent 75%),
    var(--bg-base);
  background-attachment: fixed, fixed, fixed;
  min-height:100vh;
}
::selection{ background:var(--chip-bg-hover); color:var(--text-1); }
a{ color:inherit; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.revealed{ opacity:1; transform:none; }
.stagger > .reveal:nth-child(1){ transition-delay:0s; }
.stagger > .reveal:nth-child(2){ transition-delay:.08s; }
.stagger > .reveal:nth-child(3){ transition-delay:.16s; }
.stagger > .reveal:nth-child(4){ transition-delay:.24s; }
.stagger > .reveal:nth-child(5){ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ================= HOME LAYOUT ================= */
.wrap{ max-width:1180px; margin:0 auto; padding:28px 20px 80px; display:grid; grid-template-columns:300px 1fr; gap:40px; }
@media (max-width:880px){ .wrap{ grid-template-columns:1fr; } }

aside{ align-self:start; position:sticky; top:28px; }
@media (max-width:880px){ aside{ position:static; } }

.card{ background:var(--bg-card); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-card); }
.id-card{ padding:28px 26px 22px; }
.id-mark{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:11px; background:var(--chip-bg); color:var(--accent); margin-bottom:16px;
}
.id-name-zh{ font-family:'Fraunces', serif; font-weight:700; font-size:clamp(1.7rem,4vw,2.1rem); color:var(--text-bright); letter-spacing:0.01em; line-height:1.1; margin:0; }
.id-name-en{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--text-3); letter-spacing:0.08em; margin:5px 0 12px; }
.id-title{ font-size:0.95rem; color:var(--text-2); margin:0 0 20px; }

nav.sections{ display:flex; flex-direction:column; margin-top:4px; }
nav.sections a{
  display:flex; align-items:center; gap:16px; text-decoration:none; padding:11px 2px;
  font-size:0.94rem; color:var(--text-2);
}
nav.sections a .ln{ background:var(--text-2); flex-shrink:0; width:40px; height:1px; transition:width .3s ease, background .3s ease; }
nav.sections a .lb{ transition:color .25s ease, transform .25s ease; }
nav.sections a:hover .ln, nav.sections a.active .ln{ background:var(--text-bright); width:64px; }
nav.sections a:hover .lb, nav.sections a.active .lb{ color:var(--accent-strong); transform:translateX(4px); }
nav.sections a.ai-entry .lb{ color:var(--accent-strong); font-weight:700; }
nav.sections a.ai-entry .ln{ width:56px; }
.ai-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-strong); display:inline-block; margin-left:2px; animation:pulseGlow 2s infinite; }
@keyframes pulseGlow{
  0%, 100% { opacity:1; box-shadow:0 0 0 0 var(--glow); }
  50% { opacity:.6; box-shadow:0 0 0 5px transparent; }
}

.mobile-nav{ display:none; }
@media (max-width:880px){
  .mobile-nav{ display:flex; gap:8px; overflow-x:auto; padding:14px 4px 4px; }
  .mobile-nav a{
    flex:0 0 auto; font-size:0.82rem; padding:7px 14px; border-radius:999px; text-decoration:none;
    border:1px solid var(--border); color:var(--text-2); font-family:'IBM Plex Mono', monospace;
  }
  .mobile-nav a.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
  nav.sections{ display:none; }
}

.id-foot{ display:flex; align-items:center; gap:10px; padding:16px 2px 4px; flex-wrap:wrap; border-top:1px solid var(--border); margin-top:8px; }
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; border:1px solid transparent; background:transparent; color:var(--text-2);
  text-decoration:none; cursor:pointer; transition:color .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.icon-btn:hover{ color:var(--accent-strong); border-color:var(--chip-border); transform:translateY(-3px); box-shadow:0 4px 14px var(--glow); }
.icon-btn svg{ width:17px; height:17px; }
.id-loc{ font-size:0.82rem; color:var(--text-3); margin-left:2px; }

main{ min-width:0; }
section{ padding:8px 4px 60px; scroll-margin-top:24px; }
section:last-of-type{ padding-bottom:20px; }

.sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:24px; }
.sec-num{ font-family:'IBM Plex Mono', monospace; font-size:1rem; color:var(--accent-2); }
.sec-title{ font-family:'Fraunces', serif; font-size:1.55rem; font-weight:700; color:var(--text-bright); margin:0; }

.lede{ font-size:1rem; color:var(--text-2); max-width:64ch; }
.lede p{ margin:0 0 14px; }
.lede strong{ color:var(--text-1); font-weight:600; }

.pill-row{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.pill{
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--accent-strong);
  background:var(--chip-bg); border:1px solid var(--chip-border); border-radius:20px;
  padding:5px 14px; display:inline-flex; align-items:center;
  transition:background .2s, border-color .2s, transform .2s;
}
.pill:hover{ background:var(--chip-bg-hover); border-color:var(--accent); transform:translateY(-2px); }

.timeline{ display:flex; flex-direction:column; gap:22px; }
.tl-item{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:22px 24px 20px; box-shadow:var(--shadow-card); transition:background-color .25s, box-shadow .25s, transform .25s;
}
.tl-item:hover{ background:var(--bg-hover-card); box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.tl-top{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.tl-dates{ font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--accent-2); white-space:nowrap; }
.tl-org{ font-weight:700; font-size:1.04rem; color:var(--text-bright); }
.tl-role{ font-size:0.85rem; color:var(--text-3); }
.tl-desc{ font-size:0.92rem; color:var(--text-2); margin:9px 0 0; }

.proj-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
@media (max-width:700px){ .proj-grid{ grid-template-columns:1fr; } }
.proj-card{
  border-radius:var(--radius-card); padding:22px 20px; display:flex; flex-direction:column;
  transition:background-color .25s, box-shadow .25s, opacity .3s; margin:6px;
}
.proj-grid:hover .proj-card{ opacity:.55; }
.proj-grid:hover .proj-card:hover{ opacity:1; }
.proj-card:hover{ background-color:var(--bg-hover-card); box-shadow:var(--shadow-hover); }
.proj-title{ font-weight:700; font-size:1.02rem; color:var(--text-bright); margin:0 0 4px; }
.proj-role{ font-size:0.78rem; color:var(--text-3); margin-bottom:11px; }
.proj-metric{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--accent-2);
  background:var(--chip-bg); display:inline-block; padding:4px 11px; border-radius:20px;
  margin-bottom:11px; width:fit-content; border:1px solid var(--chip-border);
}
.proj-desc{ font-size:0.88rem; color:var(--text-2); flex:1; margin:0 0 12px; }

.ai-banner{
  background:linear-gradient(135deg, var(--glow) 0%, transparent 60%), var(--bg-card);
  border:1px solid var(--chip-border); border-radius:16px; padding:38px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;
  position:relative; overflow:hidden; transition:border-color .3s, box-shadow .3s;
}
.ai-banner:hover{ border-color:var(--accent); box-shadow:var(--shadow-hover); }
.ai-banner:before{
  content:""; position:absolute; top:-55%; right:-12%; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, var(--glow-2) 0%, transparent 70%); animation:floatBlob 8s ease-in-out infinite; pointer-events:none;
}
@keyframes floatBlob{ 0%,100%{ transform:translate(0); } 33%{ transform:translate(14px,-18px); } 66%{ transform:translate(-10px,14px); } }
.ai-banner-info{ position:relative; z-index:1; max-width:420px; }
.ai-badge{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--accent-strong);
  background:var(--chip-bg); border:1px solid var(--chip-border); border-radius:20px;
  padding:5px 13px; display:inline-flex; align-items:center; gap:6px; margin-bottom:14px;
}
.ai-banner-title{ font-family:'Fraunces', serif; font-size:1.35rem; font-weight:700; color:var(--text-bright); margin:0 0 8px; }
.ai-banner-desc{ font-size:0.92rem; color:var(--text-2); margin:0; }
.ai-banner-btn{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px;
  background:var(--accent-strong); color:#fff; border:none; border-radius:11px; padding:15px 30px;
  font-size:0.94rem; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
}
.ai-banner-btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 10px 30px var(--glow); }
.ai-banner-btn svg{ width:17px; height:17px; transition:transform .3s; }
.ai-banner-btn:hover svg{ transform:translateX(4px); }

footer.site-footer{ max-width:1180px; margin:0 auto; padding:10px 20px 40px; font-size:0.78rem; color:var(--text-3); text-align:center; }
footer.site-footer .inner{ border-top:1px solid var(--border); padding-top:18px; }

/* ================= CHAT PAGE ================= */
body.chat-body{ display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.chat-topbar{
  display:flex; align-items:center; gap:16px; padding:14px 22px; border-bottom:1px solid var(--border);
  background:var(--bg-card); flex-shrink:0;
}
.chat-back{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:9px; color:var(--text-2); text-decoration:none; transition:background .2s, color .2s;
}
.chat-back:hover{ background:var(--chip-bg); color:var(--accent-strong); }
.chat-title{ font-weight:700; font-size:1rem; color:var(--text-bright); flex:1; }
.chat-title span{ color:var(--text-3); font-weight:500; }
.chat-status{ display:flex; align-items:center; gap:14px; }
.status-dot{ width:8px; height:8px; border-radius:50%; background:#2fbf71; box-shadow:0 0 0 3px rgba(47,191,113,0.18); }
.status-label{ font-size:0.82rem; color:var(--text-2); display:flex; align-items:center; gap:6px; }

.chat-body-scroll{ flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center; padding:40px 20px 24px; }
.chat-hero{ text-align:center; max-width:520px; margin:auto 0 30px; }
.chat-avatar{
  width:96px; height:96px; margin:0 auto 22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--chip-bg), var(--bg-card-lighter)); border:1px solid var(--chip-border); color:var(--accent);
}
.chat-avatar svg{ width:44px; height:44px; }
.chat-hero h1{ font-family:'Fraunces', serif; font-size:1.5rem; color:var(--text-bright); margin:0 0 10px; }
.chat-hero p{ color:var(--text-2); font-size:0.95rem; margin:0; }

.chat-suggest-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:640px; margin:26px auto 0; }
.suggest-pill{
  font-size:0.86rem; color:var(--accent-strong); background:var(--chip-bg); border:1px solid var(--chip-border);
  border-radius:999px; padding:10px 18px; cursor:pointer; transition:background .2s, border-color .2s, transform .2s;
}
.suggest-pill:hover{ background:var(--chip-bg-hover); border-color:var(--accent); transform:translateY(-2px); }

.chat-thread{ width:100%; max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:16px; padding-bottom:16px; }
.msg{ max-width:82%; font-size:0.94rem; line-height:1.65; white-space:pre-wrap; animation:fadeInUp .35s ease-out; }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.msg.user{ align-self:flex-end; background:var(--bubble-user); color:var(--text-1); padding:12px 16px; border-radius:14px 14px 3px 14px; }
.msg.bot{ align-self:flex-start; background:var(--bg-card-lighter); border:1px solid var(--border); color:var(--text-1); padding:12px 16px; border-radius:14px 14px 14px 3px; }

.chat-inputbar{ flex-shrink:0; padding:14px 20px 20px; background:linear-gradient(0deg, var(--bg-base) 65%, transparent); }
.chat-input-shell{
  max-width:680px; margin:0 auto; display:flex; align-items:flex-end; gap:10px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:20px; padding:10px 10px 10px 20px; box-shadow:var(--shadow-card);
}
.chat-input-shell textarea{
  flex:1; border:none; background:transparent; resize:none; font-family:inherit; font-size:0.94rem;
  color:var(--text-1); line-height:1.5; max-height:140px; padding:8px 0; outline:none;
}
.chat-input-shell textarea::placeholder{ color:var(--text-3); }
.chat-send{
  width:38px; height:38px; border-radius:50%; border:none; background:var(--accent-strong); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform .2s, opacity .2s;
}
.chat-send:hover{ transform:scale(1.06); }
.chat-send:disabled{ opacity:.45; cursor:default; }
.chat-send svg{ width:16px; height:16px; }
.chat-footnote{ text-align:center; font-size:0.74rem; color:var(--text-3); margin:10px auto 0; max-width:680px; }