*{box-sizing:border-box}body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:#f2f4f7;color:#222}
.top{background:#163300;color:#fff;padding:12px 16px;font-size:17px;display:flex;align-items:center;justify-content:space-between}
.top small{opacity:.85;font-size:12px}
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.m{max-width:78%;padding:9px 12px;border-radius:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;font-size:15px}
.m .who{font-size:11px;color:#888;margin-bottom:2px}
.m.me{align-self:flex-end;background:#163300;color:#fff;border-bottom-right-radius:3px}.m.me .who{color:#cfe8bd}
.m.other{align-self:flex-start;background:#fff;border-bottom-left-radius:3px;box-shadow:0 1px 2px #0001}
.m.sys{align-self:center;background:none;color:#888;font-size:12px;padding:2px}
.m img{max-width:220px;max-height:260px;border-radius:8px;display:block;cursor:pointer}
.bar{display:flex;gap:8px;padding:10px;background:#fff;border-top:1px solid #e3e6ea;align-items:flex-end}
.bar textarea{flex:1;resize:none;border:1px solid #d5d9df;border-radius:8px;padding:9px;font:inherit;font-size:15px;max-height:120px}
.btn{border:0;background:#163300;color:#fff;border-radius:8px;padding:9px 14px;font-size:15px;cursor:pointer;white-space:nowrap}
.btn.gray{background:#eef1f5;color:#333}.btn.warn{background:#f08c00}
.badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:#e03131;color:#fff;font-size:12px;text-align:center;line-height:18px}
.tag{font-size:11px;padding:1px 6px;border-radius:4px;margin-left:4px}.tag.bot{background:#e7f5ff;color:#1971c2}.tag.waiting_human{background:#fff3bf;color:#e67700;font-weight:bold}.tag.human{background:#d3f9d8;color:#2b8a3e}
html,body{height:100%}.wrap{height:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;background:#f7f8fa}
#login{max-width:340px;margin:12vh auto;background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 10px #0001}#login input{width:100%;padding:10px;margin:8px 0;border:1px solid #d5d9df;border-radius:8px;font-size:15px}
#login .btn{width:100%}#le{color:#e03131;margin-top:8px}.hidden{display:none!important}
#app{height:100%;display:flex;flex-direction:column}.main{flex:1;display:flex;min-height:0}.list{width:300px;background:#fff;border-right:1px solid #e3e6ea;overflow-y:auto}
.it{padding:10px 12px;border-bottom:1px solid #f0f1f3;cursor:pointer}.it:hover{background:#f6faf2}.it.on{background:#eef8e6}.it.w{border-left:4px solid #f08c00}
.it .l{font-size:12px;color:#888;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:3px}.it .tm{float:right;font-size:11px;color:#aaa}.empty{padding:20px;color:#888}
.chat{flex:1;display:flex;flex-direction:column;min-width:0}.hd{padding:10px 14px;background:#fff;border-bottom:1px solid #e3e6ea;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hd .sp{flex:1}.muted{color:#888}
.prob{background:#fff9db;padding:8px 14px;font-size:13px;color:#7a5b00}.sm{padding:4px 8px!important}.badge.o{background:#f08c00}
@media(max-width:700px){.list{width:100%}.main.open .list{display:none}.main:not(.open) .chat{display:none}}