:root{
  --bg:#0b0b0f;
  --card:#141420;
  --muted:#8d8da3;
  --text:#f2f2f7;
  --line:#222235;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  background:var(--bg);
  color:var(--text);
}
.wrap{
  max-width:720px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.top{
  position:sticky; top:0;
  background:rgba(11,11,15,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.title{display:flex; gap:10px; align-items:center}
.dot{width:10px;height:10px;border-radius:999px;background:#9b87ff; box-shadow:0 0 16px #9b87ff}
.h1{font-weight:700; letter-spacing:.5px}
.sub{font-size:12px;color:var(--muted); margin-top:2px}
.chat{
  flex:1;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.msg{
  max-width: 92%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--card);
  line-height:1.45;
  white-space:pre-wrap;
}
.me{align-self:flex-end; background:#1c1c2b}
.her{align-self:flex-start}
.meta{
  font-size:11px;
  color:var(--muted);
  margin:2px 0 0 6px;
}
.bar{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background:rgba(11,11,15,.92);
  backdrop-filter: blur(10px);
}
.input{
  flex:1;
  border:1px solid var(--line);
  background:#0f0f18;
  color:var(--text);
  border-radius:14px;
  padding:12px 12px;
  font-size:16px;
  outline:none;
}
.btn{
  border:1px solid var(--line);
  background:#9b87ff;
  color:#0b0b0f;
  font-weight:700;
  padding:10px 12px;
  border-radius:14px;
  min-width:72px;
}
.btn.ghost{
  background:transparent;
  color:var(--text);
}
.hint{
  padding:10px 14px 16px;
  font-size:12px;
  color:var(--muted);
}