:root{color-scheme:light;--ink:#25372d;--mute:#647369;--paper:#f6f5ee;--leaf:#306844;--line:#cbd3c5;--card:#fffffa;--mine:#e7eee4;--code:#eef0e8;--field:#fff;--track:#e2e6dc;--on-leaf:#fff;--warn:#b8742d;--bad:#a63d3d}
[data-theme=dark]{color-scheme:dark;--ink:#dfe6dc;--mute:#92a08f;--paper:#161b18;--leaf:#6fb585;--line:#33403a;--card:#1e2622;--mine:#253129;--code:#262f2a;--field:#1b221e;--track:#2c362f;--on-leaf:#10160f;--warn:#d6a05a;--bad:#e07a7a}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:15px/1.45 system-ui,sans-serif;color:var(--ink);background:var(--paper)}
button{font:inherit;border:1px solid var(--leaf);background:var(--leaf);color:var(--on-leaf);border-radius:999px;padding:.25rem .8rem;cursor:pointer}
button.ghost{background:transparent;color:var(--ink);border-color:var(--line)}button:disabled{opacity:.5;cursor:default}
button.small{padding:.05rem .55rem;font-size:.8rem}
input,textarea{font:inherit;color:inherit;border:1px solid var(--line);border-radius:.5rem;padding:.45rem .6rem;background:var(--field)}
.muted{color:var(--mute)}.error{color:var(--bad);min-height:1.2em}.grow{flex:1}
#gate:not([hidden]){max-width:22rem;margin:18vh auto;display:flex;flex-direction:column;gap:.6rem;padding:0 1rem}#gate h1{margin:0;font-weight:500}
#app:not([hidden]){height:100%;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;border-bottom:1px solid var(--line)}
header h1{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
main{flex:1;min-height:0;display:grid;grid-template-columns:9rem 1fr 20rem}main>*{min-height:0;min-width:0}
nav{border-right:1px solid var(--line);padding:.8rem .5rem;display:flex;flex-direction:column;gap:.2rem;overflow:auto}
nav button{text-align:left;background:transparent;color:var(--ink);border-color:transparent}nav button[aria-current]{background:var(--mine);border-color:var(--line)}
nav button.unread{font-weight:700}
#chat{display:flex;flex-direction:column;min-width:0}
#log{flex:1;min-height:0;overflow:auto;padding:.8rem 1rem;display:flex;flex-direction:column;gap:.4rem}#older{align-self:center;margin-bottom:.5rem}
.msg{max-width:60rem;padding:.35rem .7rem;border-radius:.6rem;background:var(--card);border:1px solid var(--line);overflow-wrap:anywhere}
.msg.mine{background:var(--mine)}.msg.to-me{box-shadow:inset 3px 0 0 var(--leaf)}
.msg.system{background:transparent;border-style:dashed;color:var(--mute);font-size:.9em}
.msg .room.at-me{background:var(--mine);border-radius:.25em;padding:0 .15em}
.msg .meta{font-size:.78em;color:var(--mute);display:flex;gap:.6rem}.msg .meta b{color:var(--ink)}
.msg .body{white-space:normal}.msg .body p{margin:.35em 0}.msg .body h1,.msg .body h2,.msg .body h3,.msg .body h4,.msg .body h5,.msg .body h6{font-size:1em;line-height:1.3;margin:.55em 0 .2em}.msg .body h1{font-size:1.15em}.msg .body h2{font-size:1.05em}.msg .body ul,.msg .body ol{margin:.3em 0;padding-left:1.3em}.msg .body li{margin:.12em 0}.msg .body blockquote{margin:.35em 0;padding-left:.7em;border-left:3px solid var(--line);color:var(--mute)}.msg .body hr{border:0;border-top:1px solid var(--line);margin:.6em 0}.msg .body .md-table{overflow-x:auto;margin:.4em 0}.msg .body table{border-collapse:collapse;width:100%;font-size:.92em}.msg .body th,.msg .body td{border:1px solid var(--line);padding:.28rem .45rem;vertical-align:top;text-align:left;overflow-wrap:anywhere}.msg .body th{background:var(--code)}.msg .body pre,.msg pre{background:var(--code);padding:.4rem .6rem;border-radius:.4rem;overflow:auto;white-space:pre}
.msg code{background:var(--code);padding:0 .25em;border-radius:.25em}.msg a{color:var(--leaf)}
.msg .room{color:var(--leaf)}
#composer{display:flex;align-items:flex-end;gap:.5rem;padding:.6rem 1rem;border-top:1px solid var(--line)}#composer textarea{flex:1;resize:none;max-height:50vh;overflow-y:hidden}
aside{border-left:1px solid var(--line);padding:.8rem;overflow:auto;font-size:.9rem}aside h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin:1rem 0 .4rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:.7rem;padding:.6rem .7rem;margin-bottom:.5rem}
.card .head{display:flex;align-items:center;gap:.5rem}.card .head b{font-size:1rem}.dot{width:.6rem;height:.6rem;border-radius:50%;background:#aaa;display:inline-block}
.dot.running{background:#3b9c4e;box-shadow:0 0 0 3px #3b9c4e33}.dot.idle{background:#9ab08a}.dot.paused{background:#bbb}.dot.cooling,.dot.needs,.dot.over{background:var(--warn)}
.bar{height:.45rem;background:var(--track);border-radius:2px;margin:.35rem 0 .15rem;position:relative}.bar i{display:block;height:100%;background:var(--leaf);border-radius:2px}.bar i.hot{background:var(--warn)}.bar.thin{height:.2rem;margin:.1rem 0 .3rem;opacity:.7}.bar s{position:absolute;top:-.2rem;bottom:-.2rem;width:2px;margin-left:-1px;background:var(--ink);opacity:.55}
.card .row{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}.knobs{gap:.9rem;font-size:.8rem;color:var(--mute);align-items:center}.knobs input[type=number]{width:3.6em;padding:.05rem .3rem;font-size:.85rem;margin:0 .15rem}.knobs input[type=checkbox]{vertical-align:-.1rem}.small-muted{font-size:.8em;color:var(--mute)}.ctx{font-size:.75em;color:var(--mute);align-self:flex-end;opacity:.8;font-variant-numeric:tabular-nums}.ctx.hot{color:var(--warn);opacity:1}
.run{padding:.3rem .2rem;border-bottom:1px solid var(--line);cursor:pointer}.run:hover{background:var(--mine)}.run .st{font-weight:600}.run .st.error,.run .st.limit,.run .st.auth,.run .st.killed{color:var(--bad)}.run .st.ok{color:var(--leaf)}
dialog{max-width:min(60rem,92vw);border:1px solid var(--line);border-radius:.8rem;padding:1rem}dialog pre{white-space:pre-wrap;max-height:60vh;overflow:auto;background:var(--code);padding:.6rem;border-radius:.4rem}
.mention{display:block;width:100%;text-align:left;background:transparent;color:var(--ink);border-color:transparent;border-radius:.5rem;padding:.35rem .4rem;margin:0}
.mention:hover{background:var(--mine)}
@media(max-width:900px){main{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}nav{flex-direction:row;border-right:0;border-bottom:1px solid var(--line)}aside{border-left:0;border-top:1px solid var(--line);max-height:40vh}}
.msg.target{border-color:var(--leaf);box-shadow:inset 3px 0 0 var(--leaf)}
a.msgid{text-decoration:none;font-variant-numeric:tabular-nums}
.msg .meta a.msgid{color:var(--mute)}
.msg .body a.msgid{color:var(--leaf);text-decoration:underline}
.msg .meta a.msgid:hover,.msg .body a.msgid:hover{color:var(--leaf)}
#back-latest{align-self:center;margin:.2rem 0 .4rem}

.msg .meta .acts{display:none;gap:.1rem}.msg:hover .meta .acts,.msg:focus-within .meta .acts{display:inline-flex}
.msg .act{background:transparent;border-color:transparent;color:var(--mute);padding:0 .3rem;font-size:.95em;line-height:1}.msg .act:hover{color:var(--leaf);border-color:var(--line)}
.msg .edited{opacity:.8}
.msg .quote{display:block;font-size:.85em;color:var(--mute);border-left:3px solid var(--line);padding:.1rem .5rem;margin:.15rem 0 .25rem;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg .quote b{color:var(--ink)}.msg .quote:hover{border-color:var(--leaf)}
.msg .reactions{display:flex;flex-wrap:wrap;gap:.25rem}.msg .reactions:not(:empty){margin-top:.3rem}
.msg .rx{background:var(--code);border-color:var(--line);color:var(--ink);padding:0 .45rem;font-size:.85em;line-height:1.5}.msg .rx.mine{border-color:var(--leaf);background:var(--mine)}
.msg .picker{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.3rem}.msg .picker .rx{font-size:1em}
.msg .editor textarea{width:100%;resize:vertical;display:block}.msg .editor .row{display:flex;gap:.3rem;margin-top:.3rem}
#replying:not([hidden]){padding:.3rem 1rem 0;font-size:.85em;display:flex;align-items:center;gap:.4rem}#replying span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* header time-zone picker: looks like the ghost buttons beside it */
header select#tz{font:inherit;font-size:.85rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;max-width:14rem;cursor:pointer}
