:root {
  color-scheme: light;
  --ink: #17191e;
  --panel: rgba(248, 248, 246, 0.89);
  --line: rgba(37, 42, 48, 0.14);
  --muted: #66707c;
  --blue: #456985;
  --green: #26c666;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(rgba(3, 15, 27, 0.17), rgba(3, 15, 27, 0.17)), url('/assets/va-mountain-background.png') center / cover fixed no-repeat;
}

.site-shell {
  min-height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: clamp(20px, 4vw, 74px);
}

.chat-panel {
  width: min(430px, 100%);
  height: min(720px, calc(100vh - 40px));
  padding: 23px 22px 20px;
  border-radius: 30px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(11px);
  display: flex;
  flex-direction: column;
}

.chat-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 2px; color:var(--blue); font-size:0.74rem; font-weight:800; letter-spacing:0.14em; }
h1 { margin:0; font-size:clamp(1.45rem, 3vw, 2rem); line-height:1.05; }
.online-status { margin-top:2px; display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:rgba(30, 36, 43, 0.08); font-size:0.78rem; font-weight:750; white-space:nowrap; }
.online-status span { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(38,198,102,0.15); }

.messages { flex:1; overflow-y:auto; padding:30px 4px 16px; display:flex; flex-direction:column; gap:12px; scroll-behavior:smooth; }
.message { max-width:86%; padding:14px 16px; border-radius:18px; line-height:1.45; font-size:0.95rem; white-space:pre-wrap; overflow-wrap:anywhere; box-shadow:0 5px 18px rgba(30, 35, 41, 0.08); }
.assistant-message { align-self:flex-start; background:#fff; border-bottom-left-radius:5px; }
.user-message { align-self:flex-end; background:#19212b; color:#fff; border-bottom-right-radius:5px; }
.typing-message { color:var(--muted); font-style:italic; }

.chat-form { padding-top:13px; border-top:1px solid var(--line); display:flex; gap:9px; }
.chat-form input { min-width:0; flex:1; height:52px; border:1px solid rgba(34,39,45,0.10); border-radius:17px; padding:0 15px; color:var(--ink); background:#fff; font:inherit; outline:none; }
.chat-form input:focus { border-color:#5b82a3; box-shadow:0 0 0 3px rgba(91,130,163,0.16); }
.chat-form button { border:0; border-radius:17px; padding:0 19px; background:#171c25; color:#fff; font:700 0.92rem/1 inherit; cursor:pointer; transition:transform .15s ease, opacity .15s ease; }
.chat-form button:hover { transform:translateY(-1px); }
.chat-form button:disabled, .chat-form input:disabled { opacity:0.62; cursor:wait; }
.privacy-link { align-self:center; margin-top:10px; color:#6b737e; font-size:0.73rem; text-decoration:none; }
.privacy-link:hover { text-decoration:underline; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 680px) {
  body { background-attachment:scroll; }
  .site-shell { padding:12px; align-items:flex-end; }
  .chat-panel { height:min(720px, calc(100vh - 24px)); border-radius:26px; }
}