:root{--bg:#0f1115;--panel:#171a21;--line:#262b36;--fg:#e6e8ee;--muted:#8b93a7;--accent:#5b8def;
 --signal:#3a76f0;--telegram:#2aabee;--mattermost:#1e60d6;--ticket:#e0a526;--sms:#34a853;--chat:#8b5cf6;--own:#2e3a55}
@media (prefers-color-scheme: light){:root{--bg:#f4f5f8;--panel:#fff;--line:#e3e6ec;--fg:#15181f;--muted:#5f6778;--own:#e8eefc}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
header{position:sticky;top:0;z-index:5;display:flex;gap:8px;align-items:center;padding:10px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:700;font-size:17px}
.filters{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.chip{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:13px;background:transparent;color:var(--fg);cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
#search{flex:1 1 140px;min-width:120px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
#logout{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
main{max-width:860px;margin:0 auto;padding:8px 12px 80px}
.day{color:var(--muted);font-size:12px;margin:14px 4px 6px;text-transform:uppercase;letter-spacing:.04em}
.msg{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0;cursor:pointer}
.msg.own{background:var(--own)}
.msg.new{border-left:3px solid var(--accent)}
.meta{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:4px;flex-wrap:wrap}
.tag{font-weight:700;padding:1px 7px;border-radius:6px;color:#fff;font-size:11.5px}
.tag.signal{background:var(--signal)}.tag.telegram{background:var(--telegram)}.tag.mattermost{background:var(--mattermost)}
.tag.ticket{background:var(--ticket);color:#1a1300}.tag.sms{background:var(--sms)}.tag.chat{background:var(--chat)}
.room{font-weight:600;color:var(--fg)}
.sender{color:var(--fg)}
.time{margin-left:auto}
.body{white-space:pre-wrap;word-break:break-word}
.body a{color:var(--accent)}
.reply{display:none;margin-top:8px;gap:6px}
.msg.open .reply{display:flex}
.reply input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.reply button{padding:8px 12px;border-radius:8px;border:0;background:var(--accent);color:#fff;cursor:pointer}
.empty{color:var(--muted);text-align:center;padding:40px}
.modal{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center}
.modal form{display:flex;flex-direction:column;gap:10px;width:min(360px,90vw)}
.modal input{padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--fg)}
.modal button{padding:10px;border-radius:8px;border:0;background:var(--accent);color:#fff;font-weight:600}
.hidden{display:none}
.error{color:#e5484d;min-height:1em}
#more{display:block;margin:16px auto;background:var(--panel);border:1px solid var(--line);color:var(--fg);padding:8px 16px;border-radius:999px;cursor:pointer}