*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;background:#07111e;color:#eaf5ff}button,input,textarea{font:inherit}.hide{display:none!important}.client,.desk{height:100%;display:flex}.client{max-width:1100px;margin:auto;flex-direction:column}.client>header,.chat>header{height:64px;flex:none;background:#0b1a2b;border-bottom:1px solid #1d354f;display:flex;align-items:center;padding:0 18px;gap:10px}.brand{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#10a9ff,#6b62ff);display:grid;place-items:center;font-size:21px;font-weight:900}.brand.big{width:58px;height:58px;margin-bottom:16px}.client header small,.chat header small{display:block;color:#7890a8;font-size:12px}.online{margin-left:auto;color:#55e6a2;font-size:12px}.client>main,.chat>main{flex:1;min-height:0;overflow:auto;padding:20px}.welcome{text-align:center;color:#7188a0;margin:auto;padding:60px 15px}.welcome>div{font-size:46px}.welcome h2{color:#dcecff}.message{display:flex;gap:9px;margin:12px 0}.message.mine{justify-content:flex-end}.bubble{background:#13283f;padding:10px 13px;border-radius:15px;max-width:min(75%,620px);white-space:pre-wrap;word-break:break-word;line-height:1.5}.mine .bubble{background:#168fe2}.avatar{width:32px;height:32px;border-radius:10px;background:#18334e;display:grid;place-items:center}.meta{font-size:10px;color:#71869c;margin-top:3px}.mine .meta{text-align:right}.image-msg{max-width:320px;max-height:320px;border-radius:12px;display:block;cursor:pointer}.composer{flex:none;border-top:1px solid #1d354f;background:#091827;padding:8px 12px 12px}.tools{display:flex;gap:8px;height:32px}.tools button,.tools label,.chat header button,.sidehead button{border:0;background:transparent;color:#91a8be;padding:5px 8px;border-radius:7px;cursor:pointer}.tools button:hover,.tools label:hover,.chat header button:hover{background:#142c44}.row{display:flex;gap:8px}.row textarea{flex:1;resize:none;min-height:44px;max-height:130px;border:1px solid #29445f;background:#07111e;color:#fff;border-radius:11px;padding:10px;outline:0}.row textarea:focus{border-color:#149ce9}.row>#send,.loginbox>#loginBtn{border:0;background:#1598ed;color:#fff;border-radius:11px;padding:0 18px;font-weight:700}.composer>#emojis{display:none;position:absolute;bottom:110px;background:#10243a;border:1px solid #2a4661;border-radius:12px;padding:10px;grid-template-columns:repeat(8,1fr);gap:3px}.composer>#emojis.open{display:grid}.composer>#emojis button{border:0;background:transparent;font-size:21px;padding:4px;cursor:pointer}.desk{width:100%}.desk aside{width:320px;flex:none;background:#091725;border-right:1px solid #1d354f;overflow:auto}.sidehead{height:64px;border-bottom:1px solid #1d354f;padding:0 14px;display:flex;align-items:center;justify-content:space-between}.conversation{padding:14px 15px;border-bottom:1px solid #11283d;cursor:pointer}.conversation:hover,.conversation.active{background:#112b44}.conversation p{margin:5px 0 0;color:#7890a8;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread{float:right;background:#149be9;color:white;border-radius:10px;padding:1px 6px;font-size:10px}.chat{min-width:0;flex:1;display:flex;flex-direction:column}.chat>header{justify-content:space-between}.login{height:100%;display:grid;place-items:center}.loginbox{width:min(400px,92vw);padding:32px;border:1px solid #25425f;border-radius:18px;background:#0b1b2d}.loginbox input{width:100%;padding:12px;margin:6px 0;border:1px solid #29445f;border-radius:10px;background:#07111e;color:#fff}.loginbox #loginBtn{width:100%;height:44px;margin-top:8px}.loginbox #err{color:#ff7985;font-size:13px}@media(max-width:700px){.desk aside{position:absolute;inset:0;width:100%;z-index:5;display:none}.desk.listopen aside{display:block}.bubble{max-width:85%}.client>header,.chat>header{height:58px;padding:0 12px}.client>main,.chat>main{padding:12px}.row>#send{padding:0 14px}.image-msg{max-width:240px;max-height:240px}}