:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #10251f;
  color: #edf9f1;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #245442 0, #10251f 56%); }
.chat-shell { width: min(100% - 2rem, 760px); margin: 0 auto; padding: 2rem 0; }
.chat { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(180, 242, 205, .25); border-radius: 1.25rem; background: rgba(13, 35, 28, .88); box-shadow: 0 1rem 4rem rgba(0, 0, 0, .25); }
.chat__header { padding: 2rem 2rem 1.25rem; }
.chat__eyebrow { margin: 0 0 .5rem; color: #9edbb6; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.5rem); }
.chat__header p:last-child { margin: .75rem 0 0; color: #c8dfd0; font-size: 1.1rem; }
.messages { display: grid; gap: .75rem; min-height: 12rem; max-height: 52vh; overflow-y: auto; padding: 1.25rem 2rem; border-top: 1px solid rgba(180, 242, 205, .16); border-bottom: 1px solid rgba(180, 242, 205, .16); }
.message { width: fit-content; max-width: min(90%, 36rem); padding: .75rem 1rem; border-radius: 1rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.message--user { justify-self: end; background: #56b978; color: #062111; border-bottom-right-radius: .25rem; }
.message--assistant { background: #1e4536; border-bottom-left-radius: .25rem; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: .75rem; padding: 1rem; }
textarea { resize: vertical; min-height: 3.2rem; padding: .8rem; border: 1px solid #457c61; border-radius: .8rem; background: #0c211a; color: inherit; font: inherit; }
button { align-self: end; min-height: 3.2rem; padding: 0 1.15rem; border: 0; border-radius: .8rem; background: #7ee19f; color: #082016; cursor: pointer; font: inherit; font-weight: 700; }
button:disabled { cursor: wait; opacity: .65; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 560px) { .chat-shell { width: 100%; padding: 0; } .chat { border: 0; border-radius: 0; min-height: 100dvh; } .messages { flex: 1; min-height: 0; max-height: none; } .chat__header, .messages { padding-left: 1.25rem; padding-right: 1.25rem; } .composer { grid-template-columns: 1fr; } button { width: 100%; } }