:root { font-family: system-ui, sans-serif; color: #23372c; background: #f6faf6; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 760px; margin: auto; padding: 16px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 12px; }
header h1 { margin: 0; font-size: 26px; }
header p { margin: 8px 0; }
small, #status { color: #52665a; }
#messages { flex: 1; min-height: 80px; overflow-y: auto; padding: 4px; }
.message { background: white; padding: 12px; border: 1px solid #d7e3d9; border-radius: 12px; margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.user { background: #e5f1e6; }
.message button { display: block; margin-top: 8px; }
form { flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom); }
label { display: block; margin-bottom: 6px; }
textarea { width: 100%; resize: vertical; max-height: 150px; font: inherit; font-size: 16px; padding: 10px; border: 1px solid #a8bdad; border-radius: 8px; }
.actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
button { min-height: 44px; min-width: 80px; padding: 10px 16px; font: inherit; border: 1px solid #a8bdad; border-radius: 8px; background: white; color: #23372c; cursor: pointer; }
#send { background: #2b6645; color: white; }
button:disabled { opacity: .55; cursor: default; }
#status { min-height: 20px; font-size: 13px; margin: 8px 0 0; overflow-wrap: anywhere; }