body {
    margin: 0 auto;
    max-width: 48rem;
    padding: 1rem;
    font-family: system-ui, sans-serif;
    display: grid;
    gap: 0.75rem;
}
/* #log and form set display themselves, which would otherwise win
   over the user-agent rule for [hidden]. */
[hidden] {
    display: none !important;
}
#picker {
    display: flex;
    gap: 0.5rem;
}
#model {
    padding: 0.35rem;
}
#status {
    color: #666;
    font-size: 0.9rem;
}
#log {
    display: grid;
    gap: 0.5rem;
}
.msg {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    white-space: pre-wrap;
}
.msg.user {
    background: #e8f0fe;
    justify-self: end;
}
.msg.assistant {
    background: #f1f3f4;
    justify-self: start;
}
.msg.error {
    background: #fce8e6;
}
form {
    display: flex;
    gap: 0.5rem;
}
#prompt {
    flex: 1;
    padding: 0.5rem;
}