:root{font-family:"Microsoft YaHei",Arial,sans-serif;color:#222;background:#f4f6fa}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}.app{display:flex;min-height:100vh}.side{width:72px;background:#fff;border-right:1px solid #e8ebf1;padding:12px 8px;display:flex;flex-direction:column;gap:8px}.nav{border:0;border-radius:8px;padding:11px 4px;background:#1467e8;color:#fff;font-size:12px;cursor:pointer}.nav.muted{background:#fff;color:#333}.main{flex:1;padding:18px}.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.card{background:#fff;border:1px solid #e8ebf1;border-radius:10px;box-shadow:0 2px 8px #1b4b7a0a}.btn{border:0;border-radius:5px;background:#1467e8;color:#fff;padding:9px 16px;cursor:pointer}.btn.light{background:#eef4ff;color:#1467e8}.btn.danger{background:#ef5350}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.metric{padding:22px;background:linear-gradient(135deg,#5979ed,#8048c5);color:#fff;border-radius:9px}.metric b{font-size:28px;display:block}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:13px;border-bottom:1px solid #edf0f5;text-align:left;font-size:14px}.split{display:grid;grid-template-columns:240px 1fr 280px;height:calc(100vh - 36px);overflow:hidden}.conversations{border-right:1px solid #e7ebf2;background:#fff}.search{margin:14px;width:calc(100% - 28px);padding:10px;border:1px solid #dfe4ec;border-radius:6px}.person{padding:14px;border-bottom:1px solid #f0f2f6;cursor:pointer}.person.active{background:#eaf3ff}.chat{display:flex;flex-direction:column;background:#f7f9fc}.chat-head{height:62px;padding:18px;background:#fff;border-bottom:1px solid #e8ebf1}.msgs{flex:1;padding:22px;overflow:auto}.msg{max-width:62%;padding:10px 14px;border-radius:9px;margin:10px 0;background:#fff}.msg.agent{margin-left:auto;background:#5bcf4a}.composer{padding:12px;background:#fff;border-top:1px solid #e8ebf1}.composer textarea{width:100%;height:72px;border:0;resize:none;outline:0}.info{background:#fff;border-left:1px solid #e8ebf1;padding:20px}.tag{display:inline-block;padding:4px 9px;border-radius:12px;background:#e8f7ed;color:#219653;font-size:12px}.phone{width:390px;max-width:100%;height:100vh;margin:auto;background:#eef1f7;display:flex;flex-direction:column}.phone-head{background:linear-gradient(90deg,#ff6464,#ff8763);color:#fff;padding:18px;font-weight:bold}.enter{flex:1;display:flex;align-items:center;justify-content:center;padding:28px;background:linear-gradient(#fff5f1,#fff)}.enter-box{text-align:center}.enter .btn{background:linear-gradient(90deg,#ff6363,#ff8a63);border-radius:28px;width:250px}.visitor-msgs{flex:1;padding:16px;overflow:auto}.visitor-input{display:flex;gap:8px;padding:12px;background:#fff}.visitor-input input{flex:1;border:1px solid #e1e5eb;border-radius:6px;padding:10px}.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px}.toolbar input{padding:9px;border:1px solid #dfe4ec;border-radius:5px}.section{padding:18px;margin-bottom:16px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#27ae60;margin-right:5px}@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}.split{grid-template-columns:200px 1fr}.info{display:none}}