:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #29262e; background: #fbf8f8; color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100%,780px); min-height: 100dvh; margin:auto; padding:28px 22px;
  display:flex; flex-direction:column; gap:18px; }
header { text-align:center; padding:30px 0 14px; }
h1 { font-weight:450; letter-spacing:.12em; font-size:clamp(1.8rem,5vw,2.4rem); margin:0 0 12px; }
small { color:#756f78; font-size:.84rem; }
section { background:#fff; border:1px solid #e8e1e4; border-radius:16px;
  padding:18px; box-shadow:0 4px 20px rgba(53,29,40,.04); }
[hidden] { display:none !important; }
#history { flex:1; min-height:250px; max-height:58vh; overflow:auto; display:flex;
  flex-direction:column; gap:12px; }
.message { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; padding:12px 16px;
  border-radius:12px; max-width:90%; }
.user { align-self:flex-end; background:#f3e0e9; }
.assistant { align-self:flex-start; background:#f5f3f4; }
form,.auth-wrap { display:flex; gap:8px; }
input { min-width:0; flex:1; padding:13px; border:1px solid #d4cbd0; border-radius:10px;
  font-size:1rem; background:#fff; color:#29262e; }
input:focus-visible,button:focus-visible { outline:3px solid #b983a0; outline-offset:2px; }
button { padding:10px 18px; border:0; border-radius:10px; background:#70475c; color:#fff;
  font-size:1rem; cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
#status { min-height:20px; color:#635d61; font-size:.9rem; }
#googleLogin { width:100%; }
.hint { margin:12px 0 0; text-align:center; color:#756f78; font-size:.85rem; }
.logout { align-self:center; background:transparent; border:1px solid #d4cbd0; color:#70475c;
  font-size:.85rem; }
footer { text-align:center; }
@media (max-width:480px) {
  main { padding:16px; gap:14px; } section { padding:12px; }
  form,.auth-wrap { flex-wrap:wrap; } input { flex-basis:100%; }
  .auth-wrap button,form button { flex:1; }
}