:root{--bg:#f4f6fa;--panel:#fff;--line:#e3e7ef;--ink:#1d2433;--muted:#6b7385;--blue:#2f5d9e;--blue2:#e8eef8;
--pink:#c4577a;--in:#fff;--out:#dbe8fb;--note:#fff6d6;--wait:#c4577a}
*{box-sizing:border-box}body{margin:0;font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
background:var(--bg);color:var(--ink)}button{font:inherit;cursor:pointer}.hidden{display:none!important}
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login form{background:var(--panel);padding:28px;border-radius:14px;width:100%;max-width:360px;box-shadow:0 6px 24px #0001}
.login h1{font-size:20px;margin:0 0 4px}.login p{margin:0 0 18px;color:var(--muted)}
input,textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.login input{margin-bottom:10px}.login button,#send{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:10px 16px}
.login button{width:100%}.login a.go{display:block;background:var(--blue);color:#fff;border-radius:10px;padding:10px 16px;text-align:center;text-decoration:none}.err{color:#b3261e;font-size:13px;margin-top:8px;min-height:1em}
.app{display:flex;height:100vh}aside{width:360px;max-width:100%;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}
aside header{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
aside header #me{color:var(--muted);font-size:13px;margin-left:auto}.tgb{display:block;padding:8px 16px;font-size:13px;color:var(--blue);text-decoration:none;border-bottom:1px solid var(--line)}.tgb.done{color:var(--muted)}.link{background:none;border:0;color:var(--blue);padding:0}
nav{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}nav button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-size:13px}
nav button.on{background:var(--blue);color:#fff;border-color:var(--blue)}nav #readall{margin-left:auto;border:0;background:none;color:var(--blue);padding:5px 2px}#search{margin:0 12px 8px;width:auto}
#list{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
#list li{padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer;display:grid;
grid-template-columns:1fr auto;grid-template-areas:"nm tm" "sn bd" "as as";gap:3px 8px}
#list li:hover{background:#f7f9fc}#list li.on{background:var(--blue2)}#list li.empty{display:block;color:var(--muted)}
.nm{grid-area:nm;display:flex;gap:8px;align-items:center;min-width:0;font-weight:500}.nm.b{font-weight:700}
.nmt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm{grid-area:tm;color:var(--muted);font-size:12px;text-align:right}
.sn{grid-area:sn;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd{grid-area:bd;display:flex;gap:4px;align-items:center;justify-content:flex-end}
.u{background:var(--wait);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:700;min-width:20px;text-align:center}
.nw{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px}
.m.in.na{box-shadow:inset 3px 0 0 var(--wait)}.nal{font-size:11px;color:var(--wait);font-weight:600;margin-top:2px}
nav #fna .c{margin-left:5px;background:var(--wait);color:#fff;border-radius:999px;font-size:11px;padding:0 6px;font-weight:700}
nav #fna.on .c{background:#fff;color:var(--wait)}
.as{grid-area:as;font-size:11px;color:var(--blue)}
.bk{font-size:11px;color:#b3261e;border:1px solid #f1b8bd;border-radius:999px;padding:0 6px;white-space:nowrap}
.bkl{grid-column:1/-1;font-size:12px;color:#b3261e}
.blk{padding:10px 18px;background:#fde7e9;color:#8c1d18;font-size:14px;border-bottom:1px solid #f1b8bd}
.pl{flex:none;color:#fff;font-size:11px;font-weight:700;letter-spacing:.2px;border-radius:6px;padding:2px 8px;line-height:1.4}
.pl.big{font-size:12px;padding:3px 9px;margin-left:10px;vertical-align:middle}
.pl.tg{background:#229ED9}.pl.max{background:linear-gradient(135deg,#477BFF,#9B3CF0)}
.ok{color:#1e7d34;font-size:13px;margin-top:8px}
.login .link{display:block;width:100%;margin-top:14px;font-size:13px;text-align:center;background:none;color:var(--blue)}
main{flex:1;display:flex;flex-direction:column;min-width:0}.empty{margin:auto;color:var(--muted)}
#chat{display:flex;height:100%}.cmain{flex:1;display:flex;flex-direction:column;min-width:0}
.gk{width:300px;flex:none;border-left:1px solid var(--line);background:var(--panel);padding:14px 16px;overflow-y:auto}
.gkh{display:flex;justify-content:space-between;align-items:baseline;width:100%;background:none;border:0;padding:0 0 8px;color:var(--ink);text-align:left}
.gkh span{color:var(--muted);font-size:12px}.gkb{font-size:14px}.gkb .row2{margin:6px 0}.gkb .lbl{color:var(--muted);font-size:12px}
.gkb a{color:var(--blue)}.gkb .yes{color:#1e7d34;font-weight:700}.gkb .no{color:var(--muted);font-weight:700}
.deal{border:1px solid var(--line);border-radius:10px;padding:7px 9px;margin:6px 0;font-size:13px}
.deal.pd{border-color:#9fd3ad;background:#f1faf3}.deal .dt{color:var(--muted);font-size:12px}
.gkf{display:flex;gap:6px;margin-top:10px}.gkf input{padding:7px 9px;font-size:13px}.gkf button{border:1px solid var(--blue);background:#fff;color:var(--blue);border-radius:10px;padding:0 10px}
.top{display:flex;gap:12px;align-items:center;padding:12px 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.cname{font-weight:700;font-size:17px}.cmeta{color:var(--muted);font-size:13px}.cmeta a{color:var(--blue)}
.take{margin-left:auto;border:1px solid var(--blue);color:var(--blue);background:#fff;border-radius:10px;padding:6px 12px;font-size:13px}
.take.mine{background:var(--blue);color:#fff}.skipb{border-color:var(--line);color:var(--muted)}.skipb:not(.hidden)+.take{margin-left:8px}
.m.skip{align-self:center;background:none;box-shadow:none;border:0;color:var(--muted);font-size:13px;padding:2px 8px}.back{display:none;border:0;background:none;font-size:26px;color:var(--blue);padding:0 6px 0 0}
.msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:8px}
.m{max-width:72%;padding:8px 12px;border-radius:12px;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px 2px #0000000d}
.m .who{font-size:12px;color:var(--muted);margin-bottom:2px}.m .t{font-size:11px;color:var(--muted);margin-top:4px;text-align:right}
.m.in{align-self:flex-start;background:var(--in)}.m.out{align-self:flex-end;background:var(--out)}
.m.note{align-self:center;background:var(--note);max-width:85%;font-size:14px}
.m.pend{align-self:flex-end;background:#eef1f6;color:var(--muted)}.m.fail{align-self:flex-end;background:#fde7e9}
.day{align-self:center;color:var(--muted);font-size:12px;margin:6px 0}
.composer{padding:12px 18px;background:var(--panel);border-top:1px solid var(--line)}
.composer .row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.ghost{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--ink)}
@media (max-width:760px){#chat{flex-direction:column}.gk{width:auto;border-left:0;border-bottom:1px solid var(--line);order:-1;max-height:45vh;padding:8px 12px}
.gk:not(.open) .gkb,.gk:not(.open) .gkf,.gk:not(.open) .err{display:none}aside{width:100%}.app.open aside{display:none}.app:not(.open) main{display:none}
.back{display:block}.m{max-width:88%}.top{padding:10px 12px}.msgs{padding:12px}.composer{padding:10px 12px}}