:root { color-scheme: light dark; font: 16px/1.5 system-ui, sans-serif; color: CanvasText; background: Canvas; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(100% - 2rem, 56rem); margin: 2rem auto; }
h1 { margin: 0; font-size: 1.75rem; }
h2 { margin: 0; font-size: 1.15rem; }
header { border-bottom: 1px solid GrayText; margin-bottom: 1rem; }
section, form { margin-top: 1rem; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: .5rem 0; }
label { font-weight: 550; }
input, textarea, select, button { font: inherit; }
input, textarea, select { border: 1px solid GrayText; border-radius: .35rem; padding: .35rem .5rem; max-width: 100%; }
textarea, #invite { display: block; width: 100%; margin-top: .3rem; }
textarea { resize: vertical; }
#ttl { width: 6rem; }
button { cursor: pointer; color: HighlightText; background: Highlight; border: 1px solid Highlight; border-radius: .35rem; padding: .35rem .7rem; }
button.secondary { color: ButtonText; background: ButtonFace; border-color: GrayText; }
button:disabled { opacity: .55; cursor: default; }
.messages { overflow-y: auto; max-height: min(52vh, 40rem); min-height: 8rem; border: 1px solid GrayText; border-radius: .5rem; padding: .65rem; }
.message { padding: .55rem .7rem; margin-bottom: .45rem; border-radius: .35rem; background: color-mix(in srgb, CanvasText 5%, Canvas); }
.message.user { background: color-mix(in srgb, Highlight 11%, Canvas); }
.message-meta { display: flex; gap: .75rem; align-items: baseline; flex-wrap: wrap; }
.message-meta time, small, .empty, #connection { color: GrayText; }
.message pre { margin: .25rem 0 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
details, .grant { border: 1px solid GrayText; border-radius: .35rem; padding: .55rem .7rem; margin: .5rem 0; }
details summary { cursor: pointer; overflow-wrap: anywhere; }
details pre { overflow: auto; max-height: 25rem; }
.choice { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.grant li { margin: .3rem 0; }
.grant li button { margin-inline-start: .55rem; }
code { overflow-wrap: anywhere; }