*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#1d2433;background:#f3f5f9;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#0f172a;color:#fff}
header b{font-size:16px}header a{color:#cbd5e1;margin-left:auto;text-decoration:none}
header select{padding:4px;border-radius:6px}
.badge{background:#ef4444;color:#fff;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600}
.warn{background:#fef3c7;color:#92400e;padding:8px 14px;font-size:13px}
#app{flex:1;display:flex;min-height:0}
#list{width:330px;background:#fff;border-right:1px solid #e2e8f0;overflow-y:auto;flex-shrink:0}
#pane{flex:1;display:flex;flex-direction:column;min-width:0}
#conv{display:flex;flex-direction:column;height:100%}#conv[hidden]{display:none}
.empty{color:#94a3b8;text-align:center;padding:30px 10px}
.ci{padding:11px 14px;border-bottom:1px solid #f1f5f9;cursor:pointer;display:block}
.ci:hover{background:#f8fafc}.ci.sel{background:#e8f0ff}
.ci .r1{display:flex;gap:6px;align-items:center}.ci .nm{font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci .tm{font-size:11px;color:#94a3b8}.ci .pv{color:#64748b;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci .un{background:#ef4444;color:#fff;border-radius:999px;font-size:11px;padding:0 7px;font-weight:700}
.dot{width:9px;height:9px;border-radius:50%;background:#22c55e;flex-shrink:0}.dot.closed{background:#fff;border:2px solid #94a3b8}
.ci.unread .nm,.ci.unread .pv{color:#0f172a;font-weight:700}
#head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid #e2e8f0}
#head>div{flex:1;min-width:0}.sub{color:#64748b;font-size:12px}
#back{display:none}
button{cursor:pointer;border:0;border-radius:8px;padding:8px 14px;background:#2563eb;color:#fff;font-size:14px}
button:disabled{opacity:.5}#toggle{background:#e2e8f0;color:#1d2433}
#msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.m{max-width:75%;padding:8px 11px;border-radius:12px;background:#fff;border:1px solid #e2e8f0;align-self:flex-start;word-break:break-word}
.m.me{align-self:flex-end;background:#dbeafe;border-color:#bfdbfe}
.txt{white-space:pre-wrap}.meta{font-size:11px;color:#94a3b8;margin-top:3px;display:flex;gap:6px;justify-content:flex-end}
.tick.read{color:#2563eb}
.file{border:1px solid #e2e8f0;border-radius:8px;background:#fff;padding:6px;margin-bottom:4px}
.file img{max-width:220px;max-height:160px;border-radius:6px;display:block;margin-bottom:6px}
.frow{display:flex;gap:8px;align-items:center}.fi{font-size:24px}.fn{font-weight:600;word-break:break-all}.fs{font-size:12px;color:#64748b}
.dl{margin-left:auto;background:#2563eb;color:#fff;text-decoration:none;padding:5px 10px;border-radius:6px;font-size:12px}
.more{align-self:center;background:#e2e8f0;color:#334155;padding:5px 12px;font-size:12px}
#form{display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid #e2e8f0;align-items:flex-end}
#txt{flex:1;resize:none;border:1px solid #cbd5e1;border-radius:8px;padding:8px;font:inherit;max-height:120px}
.clip{font-size:20px;cursor:pointer;padding:4px}
#chip{padding:6px 12px;background:#f1f5f9;font-size:12px}#chip[hidden]{display:none}#chip a{color:#ef4444;cursor:pointer;margin-left:8px}
.err{color:#b91c1c;padding:0 14px;font-size:13px}.err:empty{display:none}
#toast{position:fixed;right:16px;top:16px;background:#0f172a;color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.25);z-index:9}
#toast[hidden]{display:none}
.login{align-items:center;justify-content:center}.loginbox{background:#fff;padding:26px;border-radius:12px;width:320px;max-width:92%;display:flex;flex-direction:column;gap:10px;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.loginbox input{padding:10px;border:1px solid #cbd5e1;border-radius:8px;font:inherit}.loginbox h2{margin:0 0 4px}
@media(max-width:760px){#list{width:100%}#pane{display:none}#app.show #list{display:none}#app.show #pane{display:flex}#back{display:inline-block;background:#e2e8f0;color:#1d2433}.m{max-width:88%}}