@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Lato-Regular.ttf) format("truetype")}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Lato-Bold.ttf) format("truetype")}
@font-face{font-family:Lato;font-style:italic;font-weight:400;font-display:swap;src:url(fonts/Lato-Italic.ttf) format("truetype")}
@font-face{font-family:Lato;font-style:italic;font-weight:700;font-display:swap;src:url(fonts/Lato-BoldItalic.ttf) format("truetype")}
*{box-sizing:border-box;margin:0}
:root{--r:3px;--r-sm:2px;color-scheme:light;--font:Lato,-apple-system,system-ui,"Segoe UI",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,monospace;
--lime:#c5f03c;--ink:#14170a;
--bg:#f6f7f1;--surface:#fff;--surface-2:#eef0e6;--surface-3:#e5e8da;--line:#dfe2d3;--line-strong:#858a72;
--text:#181a10;--muted:#5a5f4a;--placeholder:#686d57;
--accent:#14170a;--on-accent:#c5f03c;--accent-hover:#262a14;--accent-soft:color-mix(in srgb,var(--lime) 55%,transparent);
--focus:var(--accent);--focus-on-dark:#c5f03c;
--danger:#c92a2a;--danger-solid:#b42323;--on-danger:#fff;--ok:#16753f;--warn:#8f6224;--star:#8f6b00;
--r-1:2px;--r-2:3px;--r-3:3px;--r-4:4px;--r-5:4px;--r-6:4px;--r-pill:3px;
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;
--e1:0 1px 2px rgba(20,23,10,.08),0 2px 8px rgba(20,23,10,.08);--e2:0 8px 24px rgba(20,23,10,.16);--e3:0 16px 48px rgba(20,23,10,.28);
--dur-1:120ms;--dur-2:180ms;--ease:cubic-bezier(.2,0,0,1);
--id-0:#c83232;--id-1:#a7542a;--id-2:#8f6224;--id-3:#7a6b1f;--id-4:#5d721d;--id-5:#3b761e;--id-6:#1e764a;--id-7:#2a7a52;--id-8:#b8337a;--id-9:#c03078;--idbg-0:#bd5151;--idbg-1:#a6623f;--idbg-2:#946e38;--idbg-3:#817431;--idbg-4:#677a2e;--idbg-5:#4c8131;--idbg-6:#318159;--idbg-7:#3b8a62;--idbg-8:#bb4a85;--idbg-9:#bc4e85;}
html,body{height:100%}
html{font-size:var(--fs,14px)}
body{font:1rem/1.45 var(--font);background:var(--bg);color:var(--text);display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r);border:3px solid transparent;background-clip:padding-box}
.ic{flex:none}
.app{flex:1;min-height:0;display:flex;position:relative}
.col{display:flex;flex-direction:column;min-height:0;min-width:0}
.scroll{overflow:auto;min-height:0}
.muted{color:var(--muted)}
/* (prototype bar removed) */
/* controls */
.ib{width:32px;height:32px;border-radius:var(--r);display:inline-grid;place-items:center;color:var(--muted);flex:none;position:relative}
.ib:hover{background:var(--surface-2);color:var(--text)}
.ib.on{background:var(--accent-soft);color:var(--accent)}
.btn{height:32px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;gap:6px;font-weight:500}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--accent);color:var(--on-accent);border-color:transparent}.btn.pri:hover{filter:brightness(1.08)}
.btn.bad{background:var(--danger);color:#fff;border-color:transparent}
.field{display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:var(--r);background:var(--surface-2);border:1px solid transparent;color:var(--muted)}
.field:focus-within{border-color:var(--accent);background:var(--surface)}
.field input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text)}
.field kbd,kbd{font:11px var(--mono);padding:1px 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--muted)}
.chip{height:26px;padding:0 10px;border-radius:var(--r);border:1px solid var(--line);font-size:0.857rem;font-weight:500;color:var(--muted);display:inline-flex;align-items:center;gap:6px;background:transparent}
.chip.on{background:var(--text);color:var(--bg);border-color:transparent}
.chip:hover:not(.on){background:var(--surface-2)}
.lbl{font-size:0.786rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px;display:flex;align-items:center;justify-content:space-between}
/* avatar */
.av{width:var(--s,32px);height:var(--s,32px);border-radius:var(--ar,50%);display:grid;place-items:center;color:#fff;font-weight:600;font-size:calc(var(--s,32px)*.38);flex:none;background:hsl(var(--h) 45% 38%);position:relative}
.av.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:28%;height:28%;min-width:8px;min-height:8px;border-radius:50%;background:var(--ok);border:2px solid var(--surface)}
/* rooms */
.room{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:var(--r);color:var(--muted);width:100%;text-align:left}
.room:hover{background:var(--surface-2);color:var(--text)}
.room.unread{color:var(--text);font-weight:600}
.room.active{background:var(--accent-soft);color:var(--text);font-weight:600}
.room .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{min-width:16px;height:16px;padding:0 4px;border-radius:var(--r);background:var(--accent);color:var(--on-accent);font-size:.714rem;line-height:1;font-weight:700;display:inline-grid;place-items:center;flex:none}
.badge.mute{background:var(--surface-2);color:var(--text)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
/* space tree */
.tr>summary{list-style:none;display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:var(--r);font-weight:600;cursor:pointer}
.tr>summary::-webkit-details-marker{display:none}
.tr>summary:hover{background:var(--surface-2)}
.tr>summary>.ic{color:var(--muted);transition:transform .15s}
.tr[open]>summary>.ic{transform:rotate(90deg)}
.tr>summary .n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc{margin-left:17px;padding-left:5px;border-left:1px solid var(--line)}
/* timeline */
.tl{display:flex;flex-direction:column;gap:2px;padding:16px 24px;overflow:auto;flex:1;min-height:0}
.day{align-self:center;font-size:0.857rem;color:var(--muted);padding:2px 12px;border:1px solid var(--line);border-radius:var(--r);margin:6px 0 10px;background:var(--surface)}
.m{display:flex;gap:12px;padding:6px 8px;border-radius:var(--r)}
.m:hover{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.m .h{display:flex;gap:8px;align-items:baseline}
.m .h b{font-weight:600}.m time{font-size:0.857rem;color:var(--muted)}
.m p{max-width:68ch}
.file{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-top:6px}
.file small{display:block;color:var(--muted);font-size:0.857rem}
.rx{display:flex;gap:6px;margin-top:6px}.rx span{padding:1px 8px;border:1px solid var(--line);border-radius:var(--r);font-size:0.857rem;background:var(--surface)}
.thr{color:var(--accent);font-size:0.857rem;font-weight:600;margin-top:6px;display:inline-flex;gap:6px;align-items:center}
.typing{padding:0 32px 6px;font-size:0.857rem;color:var(--muted)}
.tl.bub .m{align-items:flex-end}.tl.bub .m:hover{background:none}
.tl.bub .b{background:var(--surface);border:1px solid var(--line);padding:8px 12px;border-radius:var(--r);max-width:540px}
.tl.bub .me{flex-direction:row-reverse}
.tl.bub .me .b{background:var(--accent);color:var(--on-accent);border-color:transparent;border-radius:var(--r)}
.tl.bub .me .h b,.tl.bub .me .av{display:none}.tl.bub .me time{color:inherit;opacity:.8}
.tl.cmp{gap:0;padding:8px 16px;font-size:0.929rem}
.tl.cmp .m{padding:3px 8px;gap:0}.tl.cmp .av{display:none}
.tl.cmp .b{display:grid;grid-template-columns:48px 108px 1fr;align-items:baseline;width:100%}
.tl.cmp .h{display:contents}.tl.cmp time{order:-1;font-family:var(--mono);font-size:0.786rem}
.tl.cmp .h b{color:hsl(var(--h) 60% 62%)}
.tl.cmp p,.tl.cmp .file,.tl.cmp .rx,.tl.cmp .thr{grid-column:3}
.cmpz{margin:0 24px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:flex;align-items:center;gap:4px;padding:6px 8px;flex:none}
.cmpz:focus-within{border-color:var(--accent)}
.cmpz input{flex:1;min-width:0;padding:6px 8px;border:0;outline:0;background:none}
.send{width:32px;height:32px;border-radius:var(--r);background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.hd{height:56px;flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line)}
.hd h1{font-size:1.071rem;font-weight:650;display:flex;align-items:center;gap:6px}
.hd .topic{color:var(--muted);font-size:0.929rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hd .sp{flex:1}
.e2e{display:inline-flex;align-items:center;gap:4px;font-size:0.857rem;color:var(--ok);font-weight:500}
