:root{--bg:#f6f7f9;--panel:#fff;--line:#e3e6eb;--text:#1b2330;--muted:#6a7585;--accent:#1f6feb;--accent-text:#fff;--hover:#f0f3f8;--active:#e8f0fe;--in:#eef1f5;--out:#1f6feb;--out-text:#fff;--note:#fff6d6;--note-line:#ecd98a;--warn:#a15c00;--warn-bg:#fff1dc;--err:#b3261e;--ok:#1a7f4b}@media (prefers-color-scheme:dark){:root{--bg:#0f131a;--panel:#161b24;--line:#262d39;--text:#e6eaf0;--muted:#93a0b2;--accent:#4b8dff;--accent-text:#08111f;--hover:#1d2430;--active:#1b2a45;--in:#222a37;--out:#3b7de8;--out-text:#fff;--note:#3a3217;--note-line:#6d5c22;--warn:#ffbe5c;--warn-bg:#3a2c12;--err:#ff8b84;--ok:#5ed39a}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:var(--text);background:var(--bg);font:14px/1.45 Inter,Noto Sans Thai,system-ui,-apple-system,Segoe UI,sans-serif}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.muted{color:var(--muted)}.center{place-items:center;height:100%;display:grid}.error{color:var(--err)}.login{place-items:center;min-height:100%;padding:16px;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;gap:14px;width:100%;max-width:380px;padding:24px;display:grid}.card h1{margin:0;font-size:22px}.card label{gap:4px;font-weight:600;display:grid}.card input{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:10px 12px;font-weight:400}button.primary,.note-btn{background:var(--accent);color:var(--accent-text);border:0;border-radius:8px;padding:9px 16px;font-weight:600}.note-btn{color:#fff;background:#b88a00}button.ghost{color:var(--muted);background:0 0;border:0;border-radius:6px;padding:4px 8px}button.ghost:hover{background:var(--hover)}.app{grid-template-columns:220px 380px minmax(0,1fr);height:100%;display:grid}.side{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;min-height:0;padding:12px 8px;display:flex}.brand{align-items:center;gap:8px;padding:4px 10px 12px;font-size:16px;font-weight:700;display:flex}.dot{background:var(--muted);border-radius:50%;width:8px;height:8px}.dot.on{background:var(--ok)}.side ul,.rows{margin:0;padding:0;list-style:none}.nav{text-align:left;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:center;width:100%;padding:8px 10px;display:flex}.nav:hover{background:var(--hover)}.nav.active{background:var(--active);font-weight:600}.count{background:var(--accent);color:var(--accent-text);border-radius:999px;padding:0 7px;font-size:12px;font-weight:600}.section{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:14px 10px 4px;font-size:12px}.grow{flex:1}.me{border-top:1px solid var(--line);grid-template-columns:auto 1fr;align-items:center;gap:8px;padding:8px;display:grid}.me .who{min-width:0;display:grid}.me .who strong,.titles strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.me button{text-align:left;grid-column:1/-1}.avatar{background:var(--active);width:36px;height:36px;color:var(--accent);border-radius:50%;flex:none;place-items:center;font-size:13px;font-weight:700;display:grid}.list{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;min-height:0;display:flex;overflow:auto}.search{background:var(--panel);z-index:1;padding:10px;position:sticky;top:0}.search input{border:1px solid var(--line);background:var(--bg);border-radius:8px;width:100%;padding:9px 12px}.banner{background:var(--warn-bg);border-radius:8px;justify-content:space-between;align-items:center;margin:0 10px 8px;padding:8px 12px;display:flex}.row{border:0;border-bottom:1px solid var(--line);text-align:left;background:0 0;gap:10px;width:100%;padding:10px 12px;display:flex}.row:hover{background:var(--hover)}.row.active{background:var(--active)}.row .body{flex:1;min-width:0}.row .top{justify-content:space-between;gap:8px;display:flex}.row .top time{color:var(--muted);flex:none;font-size:12px}.row.unread .top strong{font-weight:800}.row.unread .preview{color:var(--text);font-weight:600}.preview{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.meta{flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;display:flex}.chip{background:var(--in);color:var(--muted);border-radius:999px;padding:1px 8px;font-size:11px}.chip.warn{background:var(--warn-bg);color:var(--warn)}.badge{background:var(--accent);color:var(--accent-text);border-radius:999px;margin-left:auto;padding:0 7px;font-size:11px;font-weight:700}.empty{text-align:center;padding:32px 16px}.more{border:1px solid var(--line);background:0 0;border-radius:8px;margin:10px auto;padding:6px 14px}.thread{background:var(--bg);flex-direction:column;min-width:0;min-height:0;display:flex}.thead{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;display:flex}.thead .titles{flex:1;min-width:0;display:grid}.thead .titles .muted{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.actions button:not(.primary),.actions select{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px}.back{display:none}.msgs{flex-direction:column;flex:1;gap:8px;padding:16px;display:flex;overflow:auto}.bubble{background:var(--in);border-radius:14px;align-self:flex-start;max-width:min(560px,80%);padding:8px 12px}.bubble.out{background:var(--out);color:var(--out-text);align-self:flex-end}.bubble .text,.note .text{white-space:pre-wrap;overflow-wrap:anywhere}.bubble .foot{opacity:.75;justify-content:flex-end;gap:8px;margin-top:2px;font-size:11px;display:flex}.bubble .fail,.fail{color:var(--err);font-size:12px}.bubble.out .fail{color:#ffd3cf}.note{background:var(--note);border:1px solid var(--note-line);border-radius:10px;align-self:center;max-width:min(560px,90%);padding:8px 12px}.note .label{color:var(--muted);margin-bottom:2px;font-size:11px}.system{align-self:center;font-size:12px}.composer{background:var(--panel);border-top:1px solid var(--line);padding:8px 16px 12px}.tabs{gap:4px;margin-bottom:6px;display:flex}.tab{color:var(--muted);background:0 0;border:0;border-radius:6px;padding:4px 10px;font-weight:600}.tab.active{background:var(--active);color:var(--accent)}.tab.active.note{background:var(--note);color:var(--warn)}.mentions{flex-wrap:wrap;gap:10px;margin-bottom:6px;font-size:13px;display:flex}.chk{align-items:center;gap:4px;display:flex}.box{align-items:flex-end;gap:8px;display:flex}.box textarea{resize:vertical;border:1px solid var(--line);background:var(--bg);border-radius:10px;flex:1;min-height:44px;max-height:200px;padding:9px 12px}@media (width<=1000px){.app{grid-template-columns:180px 320px minmax(0,1fr)}}@media (width<=760px){.app{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}.side{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:center;padding:6px;overflow-x:auto}.side ul{gap:4px;display:flex}.side .section,.side .grow,.me .who,.brand{display:none}.me{border:0;padding:0 4px}.nav{white-space:nowrap;gap:6px}.thread,.app.has-thread .list,.app.has-thread .side{display:none}.app.has-thread{grid-template-rows:minmax(0,1fr)}.app.has-thread .thread{display:flex}.back{display:inline-block}}.page{align-content:start;gap:14px;max-width:760px;min-height:100%;margin:0 auto;padding:16px;display:grid}.pagehead{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.pagehead h1{flex:1;margin:0;font-size:22px}.card.wide{max-width:none}.card h2{margin:0;font-size:17px}.card h3{margin:8px 0 0;font-size:14px}.cardhead{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.cardhead .grow{flex:1}.card button:not(.primary):not(.ghost),.pagehead button:not(.primary):not(.ghost){background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 12px}.card.form textarea,.card.form select,.card.form input:not([type=checkbox]):not([type=color]){border:1px solid var(--line);background:var(--bg);border-radius:8px;width:100%;padding:9px 12px;font-weight:400}.card.form input[type=color]{border:1px solid var(--line);background:var(--bg);border-radius:8px;width:64px;height:38px;padding:2px}.hint{color:var(--muted);font-size:12px;font-weight:400}.inline{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.card label.chk{align-items:center;gap:6px;font-weight:400;display:flex}.checks{gap:6px;display:grid}.code{background:var(--bg);border:1px solid var(--line);border-radius:8px;margin:0;padding:10px 12px;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}.chip.ok{background:color-mix(in srgb, var(--ok) 18%, transparent);color:var(--ok)}.ok-text{color:var(--ok)}button.danger{color:var(--err)}.side .nav+.me{margin-top:4px}.card.alert{border-color:var(--err)}ul.plain{gap:6px;margin:10px 0 0;padding:0;list-style:none;display:grid}ul.plain li{justify-content:space-between}ul.plain select,ul.plain li button:not(.primary):not(.ghost){background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px}ul.plain li button.danger{color:var(--err)}.card.form [aria-label=Invite\ link],.card.form div[role=status] input{width:100%}.card label.inline{flex-direction:row;align-items:center;gap:8px;font-weight:400;display:flex}.card label.inline input[type=checkbox]{flex:none;width:auto}