*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#f2efe8;color:#171714;height:100vh;overflow:hidden}header{height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;background:#f7f4ed;border-bottom:1px solid #d8d3c8}header>div:first-child{display:flex;flex-direction:column;letter-spacing:.22em}header b{font-family:Georgia,serif;font-size:24px;font-weight:500}header span{font-size:10px}.status{display:flex;gap:9px;align-items:center}.status i{width:9px;height:9px;border-radius:50%;background:#c79b66}.status i.online{background:#21b56b}main{height:calc(100vh - 76px);display:grid;grid-template-columns:340px 1fr}aside{background:#faf8f3;border-right:1px solid #d8d3c8;overflow:auto}.aside-head{padding:26px 22px 16px;display:flex;align-items:end;justify-content:space-between}.aside-head h1{font:32px Georgia,serif;margin:0}.aside-head span{font-size:12px;color:#777}.visitor{padding:16px 20px;border-top:1px solid #e6e1d8;cursor:pointer}.visitor:hover,.visitor.active{background:#eee9df}.visitor-top{display:flex;justify-content:space-between;gap:10px}.visitor strong{font-size:14px}.visitor .live{color:#149b5a;font-size:11px}.visitor p{margin:7px 0 0;color:#6d6962;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation{min-width:0}.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8a857d}.empty strong{font:36px Georgia,serif;color:#3b3935}.chat-view{height:100%;display:grid;grid-template-rows:82px 1fr auto}.hidden{display:none}.chat-head{padding:18px 28px;background:#f7f4ed;border-bottom:1px solid #d8d3c8;display:flex;justify-content:space-between;align-items:center}.chat-head>div{display:flex;flex-direction:column;gap:5px}.chat-head strong{font:23px Georgia,serif}.chat-head span{font-size:12px;color:#777}#pageBadge{background:#e7e0d4;padding:8px 12px;border-radius:20px}.messages{padding:28px;overflow:auto;display:flex;flex-direction:column;gap:12px}.msg{max-width:68%;padding:12px 15px;border-radius:16px;background:#fff;box-shadow:0 3px 15px #0000000a}.msg.operator{align-self:flex-end;background:#171714;color:#fff}.msg small{display:block;margin-top:6px;opacity:.55;font-size:10px}form{display:flex;gap:12px;padding:18px 28px 24px;background:#f7f4ed;border-top:1px solid #d8d3c8}textarea{flex:1;resize:none;border:1px solid #ccc5b8;background:#fff;padding:14px;font:15px Arial;outline:none}form button{border:0;background:#171714;color:#fff;padding:0 24px;font-weight:600}.no-visitors{padding:35px 22px;color:#888;font-size:13px}@media(max-width:760px){main{grid-template-columns:150px 1fr}.aside-head{padding:18px 10px}.aside-head h1{font-size:20px}.aside-head span{display:none}.visitor{padding:12px 10px}.visitor p{font-size:10px}.msg{max-width:88%}.chat-head{padding:12px}.chat-head strong{font-size:18px}#pageBadge{display:none}.messages{padding:14px}form{padding:10px}form button{padding:0 12px}}