html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.app { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
header { padding: 10px 12px; font-weight: 600; border-bottom: 1px solid #e3e3e3; }
#messages { overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 90%; padding: 8px 10px; border-radius: 10px; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: #0078d4; color: #fff; border-bottom-right-radius: 2px; }
.msg.assistant { align-self: flex-start; background: #f2f2f2; color: #111; border-bottom-left-radius: 2px; }
#composer { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; border-top: 1px solid #e3e3e3; }
#composer input { padding: 8px 10px; border: 1px solid #cfcfcf; border-radius: 8px; outline: none; }
#composer button { padding: 8px 12px; border-radius: 8px; border: 0; background: #0078d4; color: white; cursor: pointer; }
#composer button:hover { filter: brightness(0.95); }
a { color: #0078d4; }
small { color: #666; }
code { background: #f6f6f6; padding: 2px 4px; border-radius: 4px; }