:root{font-family:Inter,"Microsoft YaHei",sans-serif;color:#203347;background:#f3f6fa;font-size:14px}*{box-sizing:border-box}body{margin:0}header{height:76px;background:#fff;border-bottom:1px solid #dfe6ee;display:flex;align-items:center;justify-content:space-between;padding:0 32px}header b{font-size:22px;color:#137e89}header span{margin-left:20px;color:#61758a}main{max-width:1500px;margin:22px auto;padding:0 24px}.card{background:#fff;border:1px solid #e0e7ef;border-radius:12px;padding:20px;margin-bottom:16px}.narrow{max-width:430px;margin:70px auto}h1{font-size:25px}h2{font-size:18px;margin:0 0 12px}p{color:#62758a;line-height:1.7}label{display:block;margin:12px 0}input,select,textarea{font:inherit;border:1px solid #cbd6e2;border-radius:7px;padding:10px;background:white;color:inherit}label input,label select{display:block;width:100%;margin-top:8px}button{font:inherit;border:1px solid #d3dfeb;border-radius:7px;background:white;color:#285b82;padding:9px 15px;cursor:pointer}button:hover{background:#edf5ff}button:disabled{opacity:.5;cursor:default}form button,.active{background:#167d8d;color:white}nav{display:flex;align-items:center;gap:10px;margin-bottom:16px}nav span{margin-left:auto;color:#71869b;font-size:12px}.banner{background:#eaf3f5;padding:14px 18px;border-radius:9px;display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}.banner small{display:block;width:100%;color:#8c622d}.toolbar{display:flex;gap:10px;margin-bottom:16px}.columns{display:grid;grid-template-columns:350px 1fr;gap:18px}.list{padding:8px}.customer{display:block;text-align:left;width:100%;border:0;border-bottom:1px solid #edf1f5;border-radius:0;padding:14px 10px}.customer.selected{background:#e5f2f5}.customer b{display:block;color:#c56529;margin-bottom:6px}.customer small{display:block;color:#61758a;margin-top:5px}.chat{padding:0;overflow:hidden}.chatHead{padding:18px;border-bottom:1px solid #e8eef4}.chatHead p{margin:0 0 8px}.chatHead button{font-size:12px}#messages{height:58vh;min-height:300px;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px;background:#f8fafc}.bubble{align-self:flex-start;max-width:85%;background:#fff0d9;padding:12px 15px;border-radius:10px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}.bubble.agent{align-self:flex-end;background:#e0f2ed}.bubble.unknown{background:#e9edf2}.bubble small{display:block;color:#6c7b89;font-size:11px;margin-bottom:5px}.empty{text-align:center;padding:50px 12px;color:#7c8da0}.pager{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:12px}#notice{color:#9a4b12;padding:0 0 12px;white-space:pre-wrap}.device{padding:16px 0;border-bottom:1px solid #e7edf3;display:flex;gap:15px;align-items:center}.device div{flex:1}.device small{display:block;margin-top:7px;color:#6c7b89}textarea{width:100%}footer{text-align:center;color:#8795a5;font-size:12px;padding:22px}[hidden]{display:none!important}@media(max-width:850px){header{padding:0 16px}header span{display:none}main{padding:0 12px}.columns{grid-template-columns:1fr}.list{max-height:330px;overflow:auto}.toolbar{flex-wrap:wrap}nav{flex-wrap:wrap}nav span{margin:0}#messages{height:55vh}}