:root {
  --ink: #173541;
  --muted: #708993;
  --brand: #286478;
  --brand-soft: #e5f3f0;
  --pink: #e9b9c3;
  --paper: rgba(255,255,255,.82);
  --line: rgba(255,255,255,.92);
  --shadow: 0 18px 46px rgba(42,86,103,.11);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; background: #edf5f7; color: var(--ink); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  overscroll-behavior: none;
}
button, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
.app-shell {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 3% 4%, rgba(127,193,184,.28), transparent 29%),
    radial-gradient(circle at 100% 1%, rgba(235,183,195,.25), transparent 28%),
    linear-gradient(180deg, #f8fbfc 0%, #edf5f7 55%, #e9f1f4 100%);
}
.bg-orb { position: absolute; border-radius: 999px; pointer-events: none; filter: blur(.2px); }
.orb-a { width: 220px; height: 220px; right: -110px; top: 220px; background: rgba(117,188,181,.12); }
.orb-b { width: 190px; height: 190px; left: -100px; bottom: 180px; background: rgba(231,178,192,.11); }
.glass { border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.top-wrap { position: relative; z-index: 5; padding: max(14px, env(safe-area-inset-top)) 14px 9px; }
.top-card {
  min-height: 68px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 22px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 9px 25px rgba(45,91,107,.10);
}
.avatar-wrap { position: relative; width: 46px; height: 46px; flex: 0 0 auto; }
.avatar { display:block; width:46px; height:46px; object-fit:cover; border-radius:15px; box-shadow:0 8px 20px rgba(59,126,146,.22); }
.online-dot { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border:3px solid #fff; border-radius:50%; background:#62c28b; }
.identity { min-width: 0; flex: 1; }
.identity-row { display:flex; align-items:center; gap:7px; min-width:0; }
.title { margin:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; line-height:1.3; font-weight:800; }
.online-tag { flex:0 0 auto; padding:4px 7px; border-radius:999px; font-size:9px; font-weight:800; color:#397b74; background:#e5f3f0; }
.subtitle { margin:4px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
.reset-btn { width:34px; height:34px; flex:0 0 auto; border-radius:11px; background:rgba(63,129,150,.08); color:#286478; font-size:20px; line-height:1; transition:.18s ease; }
.reset-btn:active { transform:scale(.93); background:rgba(63,129,150,.14); }
.chat-scroll { position:relative; z-index:2; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scroll-behavior:smooth; }
.scroll-content { width:min(100%, 760px); margin:0 auto; padding:1px 14px 28px; }
.today-pill { width:max-content; margin:2px auto 12px; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.82); font-size:10px; color:#879ba3; }
.hero-card { position:relative; overflow:hidden; margin-bottom:15px; padding:20px 17px 18px; border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.70)); box-shadow:0 16px 37px rgba(42,86,103,.12); }
.hero-glow { position:absolute; width:150px; height:150px; border-radius:50%; right:-56px; top:-68px; background:linear-gradient(145deg,rgba(129,194,185,.20),rgba(234,184,196,.16)); }
.kicker-row { position:relative; z-index:1; display:flex; align-items:center; gap:8px; }
.kicker-dot { width:6px; height:6px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 5px rgba(233,185,195,.14); }
.kicker { color:var(--brand); font-size:9.5px; font-weight:800; letter-spacing:1.2px; }
.hero-title { position:relative; z-index:1; margin:12px 0 0; font-size:26px; line-height:1.28; letter-spacing:-.6px; font-weight:850; }
.hero-desc { position:relative; z-index:1; margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.72; }
.hero-tags { position:relative; z-index:1; margin-top:13px; display:flex; flex-wrap:wrap; gap:6px; }
.hero-tag { padding:6px 8px; border-radius:10px; background:rgba(63,129,150,.065); border:1px solid rgba(63,129,150,.07); color:#567984; font-size:10px; }
.section-title { margin:0 2px 8px; color:#7c929b; font-size:11px; font-weight:800; }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.quick-card { min-height:62px; padding:10px; display:flex; align-items:center; gap:8px; text-align:left; border-radius:16px; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.73); box-shadow:0 7px 20px rgba(46,91,106,.065); transition:.16s ease; }
.quick-card:active { transform:scale(.98); background:rgba(255,255,255,.94); }
.quick-icon { width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(145deg,#e8f4f4,#f8edf0); color:#4c8b98; font-size:15px; }
.quick-text { color:#365c69; font-size:12px; line-height:1.45; font-weight:700; }
.message-list { width:100%; }
.message-row { display:flex; align-items:flex-end; gap:7px; margin:13px 0; animation:messageIn .22s ease-out; }
@keyframes messageIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.message-row.user-row { justify-content:flex-end; }
.assistant-mini { width:28px; height:28px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:9px; color:#fff; font-size:12px; background:linear-gradient(145deg,#70adbd,#84c4ba); box-shadow:0 5px 11px rgba(55,120,140,.17); }
.message-body { max-width:84%; }
.message-body.user { display:flex; flex-direction:column; align-items:flex-end; }
.bubble { position:relative; padding:11px 12px; border-radius:16px; font-size:13px; line-height:1.72; word-break:break-word; white-space:pre-wrap; box-shadow:0 7px 18px rgba(43,85,101,.07); }
.bubble.assistant { border:1px solid rgba(255,255,255,.96); border-bottom-left-radius:5px; background:rgba(255,255,255,.94); color:var(--ink); }
.bubble.user { border-bottom-right-radius:5px; background:linear-gradient(145deg,#387f91,#4a9aa0); color:#fff; box-shadow:0 8px 20px rgba(41,111,126,.18); }
.message-meta { margin-top:4px; padding:0 3px; color:#97a8ae; font-size:9px; }
.message-meta.user { text-align:right; }
.source-row { display:flex; align-items:center; gap:6px; margin-top:6px; }
.source-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.55); color:#79929a; font-size:9px; border:1px solid rgba(255,255,255,.75); }
.source-dot { color:#70b2a9; font-size:7px; }
.copy-btn { appearance:none; padding:4px 7px; border-radius:999px; background:rgba(255,255,255,.42); color:#79929a; font-size:9px; border:1px solid rgba(255,255,255,.65); }
.copy-btn:active { background:rgba(255,255,255,.8); }
.typing-dots { min-width:38px; height:20px; display:flex; align-items:center; gap:5px; }
.typing-dot { width:5px; height:5px; border-radius:50%; background:#7ca0aa; animation:typing 1.15s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay:.16s; }
.typing-dot:nth-child(3) { animation-delay:.32s; }
@keyframes typing { 0%,60%,100% { opacity:.32; transform:translateY(0); } 30% { opacity:1; transform:translateY(-3px); } }
.bottom-anchor { height:1px; }
.bottom-wrap { position:relative; z-index:6; flex:0 0 auto; padding:7px 14px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(233,241,244,0),rgba(233,241,244,.92) 20%,rgba(233,241,244,.98)); }
.disclaimer { width:min(100%,760px); margin:0 auto 6px; text-align:center; color:#81969e; font-size:9.5px; line-height:1.45; }
.composer { width:min(100%,760px); margin:0 auto; display:flex; align-items:flex-end; gap:8px; padding:7px 7px 7px 13px; border-radius:20px; background:rgba(255,255,255,.84); box-shadow:0 9px 28px rgba(42,86,103,.11); }
.input { flex:1; min-height:34px; max-height:104px; padding:8px 0 6px; resize:none; overflow-y:auto; border:0; outline:0; background:transparent; color:var(--ink); font-size:14px; line-height:1.45; }
.input::placeholder { color:#9aabb0; }
.send-btn { width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:13px; background:linear-gradient(145deg,#3b8192,#66aaa4); color:#fff; font-size:17px; box-shadow:0 7px 15px rgba(44,117,132,.22); transition:.18s ease; }
.send-btn:disabled { opacity:.36; box-shadow:none; cursor:default; }
.send-btn:not(:disabled):active { transform:scale(.93); }
.toast { position:fixed; z-index:30; left:50%; bottom:calc(94px + env(safe-area-inset-bottom)); transform:translate(-50%,10px); max-width:82%; padding:9px 13px; border-radius:999px; background:rgba(23,53,65,.90); color:#fff; font-size:12px; opacity:0; pointer-events:none; transition:.2s ease; box-shadow:0 8px 24px rgba(23,53,65,.18); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.modal-backdrop { position:fixed; z-index:40; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(22,49,59,.22); backdrop-filter:blur(8px); }
.modal-backdrop[hidden] { display:none; }
.modal-card { width:min(100%,330px); padding:24px; border-radius:24px; background:rgba(255,255,255,.96); box-shadow:0 24px 70px rgba(33,72,86,.20); text-align:center; }
.modal-icon { width:48px; height:48px; margin:0 auto 12px; display:grid; place-items:center; border-radius:16px; background:#edf5f5; color:var(--brand); font-size:25px; }
.modal-card h3 { margin:0; font-size:18px; }
.modal-card p { margin:8px 0 18px; color:var(--muted); font-size:13px; line-height:1.6; }
.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.modal-btn { height:42px; border-radius:14px; font-weight:700; }
.modal-btn.secondary { background:#f0f4f5; color:#5e7780; }
.modal-btn.primary { background:linear-gradient(145deg,#397f91,#62a6a2); color:#fff; }
@media (min-width: 700px) {
  .top-wrap { padding-left:24px; padding-right:24px; }
  .top-card { width:min(100%,760px); margin:0 auto; }
  .hero-card { padding:28px 26px 24px; }
  .hero-title { font-size:34px; }
  .hero-desc { font-size:14px; }
  .quick-card { min-height:76px; padding:14px; }
  .quick-text { font-size:13px; }
}
@media (max-width: 360px) {
  .quick-grid { grid-template-columns:1fr; }
  .title { font-size:14px; }
  .hero-title { font-size:24px; }
}