:root {
  --bg: #0b1220; --panel: #121a2b; --text: #e8eefc; --muted: #9aa8c7;
  --accent: #3d8bfd; --accent2: #20c997; --danger: #ff6b6b; --line: #243049;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; }
.top { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(11,18,32,.92); backdrop-filter: blur(8px); z-index: 2; }
.brand { font-weight: 700; }
.meta { flex: 1; color: var(--muted); font-size: .85rem; text-align: right; }
.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: .35rem .8rem; }
.panel { margin: 2rem 1rem; padding: 1.25rem; background: var(--panel); border-radius: 16px; border: 1px solid var(--line); }
.panel h1 { margin-top: 0; font-size: 1.35rem; }
.panel input { width: 100%; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: #0a101c; color: var(--text); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; }
.panel button, .composer button { margin-top: .75rem; width: 100%; padding: .85rem; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #6f5cff); color: white; font-weight: 600; font-size: 1rem; }
.err { color: var(--danger); }
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.bubble { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.bubble img { max-width: 100%; border-radius: 10px; margin-top: .5rem; display: block; }
.bubble a { color: var(--accent2); }
.btns { display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem 1rem; border-top: 1px solid var(--line); background: #0d1524; }
.btns button { border: 1px solid var(--line); background: #152038; color: var(--text); border-radius: 999px; padding: .55rem .9rem; font-size: .92rem; }
.composer { display: flex; gap: .5rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #0d1524; }
.composer input { flex: 1; border-radius: 12px; border: 1px solid var(--line); background: #0a101c; color: var(--text); padding: .75rem .9rem; font-size: 1rem; }
.composer button { width: auto; margin: 0; padding: .75rem 1rem; }
body[data-authed="1"] #login { display: none; }
body[data-authed="1"] #chat { display: flex; }
body[data-authed="1"] #logout { display: inline-block; }

/* PWA install / update banners */
.install-tip {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem;
  margin: .5rem 1rem 0; padding: .85rem 1rem;
  background: #152038; border: 1px solid var(--line); border-radius: 14px;
}
.install-tip.update { border-color: var(--accent2); }
.install-tip[hidden] { display: none !important; }
.install-tip-body { flex: 1; min-width: 12rem; }
.install-tip-body strong { display: block; margin-bottom: .25rem; }
.install-tip-body p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.install-tip-actions { display: flex; gap: .5rem; align-items: center; }
.install-primary {
  border: 0; border-radius: 999px; padding: .45rem .95rem;
  background: linear-gradient(135deg, var(--accent), #6f5cff); color: #fff; font-weight: 600;
}
.share-icon { display: inline-block; padding: 0 .2rem; font-weight: 700; color: var(--accent2); }

/* Standalone: a bit more breathing room under notch */
@media all and (display-mode: standalone) {
  .top { padding-top: calc(.75rem + env(safe-area-inset-top)); }
  #installTip { display: none !important; }
}