:root{
  --bg: #0b1130;
  --panel: #131b4a;
  --panel-2: #0e1440;
  --border: rgba(125, 216, 255, 0.16);
  --text: #eaf2ff;
  --muted: #93a1c9;
  --accent: #38f0e8;
  --accent-2: #7dd8ff;
  --accent-3: #ffb454;
  --danger: #ff6b6b;
  --good: #52e0a1;
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{margin:0; padding:0; height:100%; overscroll-behavior:none;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,sans-serif;
}

.app-shell{
  height:100dvh; display:flex; flex-direction:column;
  max-width: 480px; margin: 0 auto;
  background: radial-gradient(700px 400px at 50% -10%, #17204f 0%, var(--bg) 60%);
}

.app-header{
  display:flex; align-items:center; gap:10px;
  padding: calc(env(safe-area-inset-top,0px) + 12px) 14px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(11,17,48,0.9);
  position: sticky; top:0; z-index: 10;
}
.app-header .back{
  color: var(--muted); font-size:1.6rem; text-decoration:none; line-height:1; padding: 4px 6px;
}
.header-spacer{flex:1;}
.peer{display:flex; align-items:center; gap:10px;}
.avatar{
  width:38px; height:38px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#04222b; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.peer-name{font-weight:700; font-size:.98rem;}
.peer-status{font-size:.76rem; color:var(--muted); display:flex; align-items:center; gap:5px;}
.dot-online{width:7px;height:7px;border-radius:50%;background:var(--good); box-shadow:0 0 6px 1px var(--good);}

.install-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: linear-gradient(90deg, rgba(56,240,232,.14), rgba(125,216,255,.08));
  border-bottom: 1px solid var(--border);
  padding: 10px 14px; font-size: .82rem;
}
.install-banner span{flex:1; min-width:150px;}
.install-banner .dismiss{
  background:none; border:none; color:var(--muted); font-size:1rem; cursor:pointer; padding:4px 6px;
}
.btn{border-radius:999px; font-weight:700; cursor:pointer; border:none;}
.btn-primary{background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#04222b;}

.chat-scroll{
  flex:1; overflow-y:auto; padding: 16px 14px 8px;
  display:flex; flex-direction:column; gap:12px;
}
.day-sep{
  text-align:center; color:var(--muted); font-size:.74rem; margin: 4px 0 8px;
}

.msg{max-width: 84%; font-size:.92rem; line-height:1.5; animation: pop .18s ease-out;}
@keyframes pop{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:translateY(0);} }
.msg.user{align-self:flex-end;}
.msg.bot{align-self:flex-start;}
.bubble{padding:10px 14px; border-radius:16px;}
.msg.user .bubble{background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#04222b; border-bottom-right-radius:5px;}
.msg.bot .bubble{background: var(--panel); border:1px solid var(--border); border-bottom-left-radius:5px;}
.msg .time{font-size:.68rem; color:var(--muted); margin-top:4px; padding: 0 4px;}
.msg.user .time{text-align:right;}

.data-mini{width:100%; border-collapse:collapse; font-size:.82rem; margin-top:8px;}
.data-mini td{padding:5px 6px; border-bottom:1px solid var(--border);}
.data-mini td.num{text-align:right; font-variant-numeric: tabular-nums;}

.badge{font-size:.72rem; padding:2px 8px; border-radius:999px; display:inline-block; margin-top:4px;}
.badge.crit{background: rgba(255,107,107,.18); color: var(--danger);}

.file-chip{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  background: var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:8px 10px;
}
.file-chip .ic{
  width:32px;height:32px;border-radius:8px;background:rgba(255,107,107,.15); color:var(--danger);
  display:flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:800;
}
.file-chip .name{font-size:.8rem; font-weight:700;}
.file-chip .size{font-size:.7rem; color:var(--muted);}

.typing-bubble .bubble{display:flex; gap:4px; padding:14px 16px;}
.typing-bubble .bubble span{width:6px;height:6px;border-radius:50%;background:var(--accent-2); animation: blink 1.2s infinite ease-in-out;}
.typing-bubble .bubble span:nth-child(2){animation-delay:.2s;}
.typing-bubble .bubble span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,80%,100%{opacity:.25;} 40%{opacity:1;}}

.quick-row{
  display:flex; gap:8px; padding: 8px 14px; overflow-x:auto;
  border-top: 1px solid var(--border);
}
.quick-row button{
  white-space:nowrap; font-size:.8rem; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background: rgba(255,255,255,.03); color:var(--text);
}
.quick-row button:active{border-color: var(--accent-2);}

.composer{
  display:flex; gap:10px; align-items:center;
  padding: 10px 14px calc(env(safe-area-inset-bottom,0px) + 12px);
  border-top: 1px solid var(--border);
  background: rgba(11,17,48,0.95);
}
.composer input{
  flex:1; background: var(--panel); border:1px solid var(--border); border-radius:999px;
  padding: 11px 16px; color:var(--text); font-size:.92rem; min-width:0;
}
.composer input::placeholder{color:var(--muted);}
.composer button{
  width:42px; height:42px; border-radius:50%; border:none; flex-shrink:0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#04222b; font-size:1.1rem; cursor:pointer;
}