:root{--blue:#3390ec;--blue2:#2481cc;--line:#e7ebee;--muted:#707579;--green:#4dcd5e}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,"Microsoft YaHei",sans-serif;color:#17212b;background:#dfe7ec}button,input,textarea{font:inherit}.boot,.welcome{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,#f8fcff,#dceaf2 60%,#cadde8)}.boot>*,.welcome>*{grid-area:1/1}.boot p{margin-top:130px;color:#6b7a84}.logo{width:78px;height:78px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#5bc6ee,var(--blue));box-shadow:0 12px 28px #3390ec55;font-size:26px;font-weight:700}.welcome-card{width:min(430px,calc(100% - 30px));padding:42px;border-radius:28px;background:#fffffff2;box-shadow:0 24px 70px #3a64752b;text-align:center}.welcome-card .logo{margin:auto}.eyebrow{margin:22px 0 8px;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:3px}.welcome h1{margin:0;font-size:25px}.copy{margin:12px 0 26px;color:#73808a;font-size:14px}.form{text-align:left}.form label{display:block;margin:0 0 8px 3px;color:#5f6e78;font-size:12px;font-weight:700}.form input{width:100%;height:52px;padding:0 16px;border:1.5px solid #d9e1e6;border-radius:13px;outline:0}.form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #3390ec18}.form button{width:100%;height:50px;margin-top:14px;border:0;border-radius:13px;color:#fff;background:var(--blue);font-weight:700}.note{display:block;margin-top:18px;color:#95a0a7;font-size:11px}.shell{width:min(1440px,100%);height:100vh;min-height:620px;margin:auto;display:flex;overflow:hidden;background:#fff;box-shadow:0 12px 60px #26374625}.sidebar{width:370px;min-width:320px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#fff}.side-head{height:70px;display:flex;align-items:center;gap:10px;padding:11px 13px}.menu{width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:#72787d;font-size:23px}.search{height:46px;flex:1;padding:0 16px;border:2px solid transparent;border-radius:24px;outline:0;background:#f4f4f5}.search:focus{border-color:var(--blue);background:#fff}.inbox{padding:4px 18px 12px 74px;border-bottom:1px solid #f1f2f3}.inbox b{display:block;font-size:14px}.inbox span{color:var(--muted);font-size:12px}.list{flex:1;overflow:auto;padding:4px 7px}.conv{width:100%;min-height:72px;display:flex;align-items:center;gap:12px;padding:8px 10px;border:0;border-radius:11px;text-align:left;background:transparent;cursor:pointer}.conv:hover{background:#f5f6f7}.conv.active{color:#fff;background:var(--blue)}.avatar{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,#5bc6ee,#2481cc);font-weight:700}.conv-body{flex:1;min-width:0}.conv-top,.conv-bottom{display:flex;justify-content:space-between;gap:10px}.conv-top b,.conv-bottom span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.conv-top time{color:#858b90;font-size:12px}.conv-bottom{margin-top:8px;color:#707579;font-size:14px}.conv.active time,.conv.active .conv-bottom{color:#dcefff}.badge{min-width:22px;height:22px;padding:0 7px;display:grid;place-items:center;border-radius:12px;color:#fff;background:var(--blue);font-size:12px;font-style:normal;font-weight:700}.conv.active .badge{color:var(--blue);background:#fff}.side-foot{height:66px;padding:12px 18px;border-top:1px solid var(--line);font-size:13px}.online{color:#6f7c84}.online:before{content:"";width:7px;height:7px;display:inline-block;margin-right:6px;border-radius:50%;background:var(--green)}.chat{min-width:0;flex:1;display:flex;flex-direction:column;background:#d9e4eb}.chat-head{height:72px;display:flex;align-items:center;gap:12px;padding:9px 18px;border-bottom:1px solid var(--line);background:#fff}.person{flex:1}.person b{display:block;font-size:16px}.person span{color:#707579;font-size:13px}.notify{height:38px;padding:0 14px;border:0;border-radius:20px;color:var(--blue2);background:#eaf4fd;font-size:13px;font-weight:700}.notify.on{color:#29943a;background:#edf9ee}.messages{flex:1;overflow:auto;padding:20px clamp(20px,7vw,110px);background-image:radial-gradient(circle at 18px 18px,#fff8 1.5px,transparent 2px);background-size:70px 70px}.day{width:max-content;margin:0 auto 18px;padding:6px 13px;border-radius:15px;color:#fff;background:#6d8899b5;font-size:12px;font-weight:700}.row{display:flex;margin:6px 0}.row.mine{justify-content:flex-end}.bubble{max-width:min(560px,80%);padding:9px 12px 7px;border-radius:15px;background:#fff;box-shadow:0 1px 2px #25384526}.mine .bubble{border-bottom-right-radius:5px;background:#e3f6cf}.bubble p{margin:0;padding-right:45px;line-height:1.48;white-space:pre-wrap;overflow-wrap:anywhere}.bubble time{float:right;margin-top:-11px;color:#7d8b83;font-size:10px}.bubble time i{margin-left:4px;color:#42a5d9;font-style:normal}.empty{text-align:center;color:#617784;margin-top:80px}.composer{padding:10px clamp(20px,7vw,110px) 12px}.compose-box{display:flex;align-items:flex-end;gap:8px;padding:7px 8px 7px 18px;border-radius:18px;background:#fff;box-shadow:0 1px 3px #20313c25}.compose-box textarea{flex:1;min-height:38px;max-height:120px;padding:9px 0;border:0;outline:0;resize:none}.send{width:40px;height:40px;border:0;border-radius:50%;color:#fff;background:var(--blue);font-size:20px}.send:disabled{background:#c8d1d7}.hint{display:block;margin-top:5px;text-align:center;color:#657783;font-size:10px}.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);padding:10px 16px;border-radius:18px;color:#fff;background:#344b5bd9;font-size:13px}.customer .sidebar{display:none}.customer{max-width:980px}.customer .chat{width:100%}@media(max-width:760px){.shell{height:100dvh;min-height:100dvh}.staff .sidebar{width:100%;min-width:0}.staff .chat{display:none}.messages,.composer{padding-left:12px;padding-right:12px}.notify{width:42px;padding:0;font-size:0}.notify:after{content:"🔔";font-size:16px}.bubble{max-width:90%}.welcome-card{padding:34px 24px}}