:root{font-family:Inter,Segoe UI,sans-serif;color:#19212c;background:#f3f6f9}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{max-width:1150px;margin:0 auto;padding:32px}.card{background:#fff;border:1px solid #dce3ea;border-radius:14px;padding:28px;box-shadow:0 8px 30px #25364a12}.narrow{max-width:420px;margin:10vh auto}h1{margin:0 0 8px}h2{font-size:1rem;margin:0 0 16px}label{display:block;font-weight:600;margin:18px 0 7px}input{width:100%;padding:11px 12px;border:1px solid #bbc7d4;border-radius:8px;font:inherit}button{border:0;border-radius:8px;padding:11px 18px;background:#1769e0;color:#fff;font-weight:700;cursor:pointer}.secondary{background:#e8edf3;color:#263548}.error{color:#b42318}.muted,#connection{color:#667587}#connection,#alert-status{margin:5px 0}#alert-status{font-size:.86rem}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.actions{display:flex;align-items:center;gap:12px}.switch{margin:0;padding:10px 14px;border-radius:9px;background:#fff;border:1px solid #d4dde6}.switch input{width:auto;margin-right:7px}.layout{display:grid;grid-template-columns:300px 1fr;min-height:600px;background:#fff;border:1px solid #dce3ea;border-radius:14px;overflow:hidden}aside{padding:22px;border-right:1px solid #dce3ea}.visitor{display:block;width:100%;text-align:left;background:#f3f6fa;color:#243245;margin-bottom:8px}.visitor.waiting{background:#fff1d6;color:#8a4b00;box-shadow:inset 3px 0 #f59e0b}.visitor.active{background:#dceaff;color:#124b9c;box-shadow:none}article{display:flex;min-width:0}.empty{margin:auto;color:#718096}.person{padding:18px 22px;border-bottom:1px solid #e0e6ec}.person span{display:block;color:#6c7987;font-size:.9rem;margin-top:3px}#conversation{display:grid;grid-template-rows:auto 1fr auto;width:100%}#messages{padding:22px;overflow-y:auto;max-height:500px}.message{max-width:75%;padding:10px 13px;border-radius:12px;background:#edf1f5;margin:8px 0}.message.operator{background:#1769e0;color:#fff;margin-left:auto}#reply{display:flex;gap:10px;padding:16px;border-top:1px solid #e0e6ec}#reply input{flex:1}@media(max-width:720px){main{padding:12px}.layout{grid-template-columns:1fr}.layout aside{border-right:0;border-bottom:1px solid #dce3ea;min-height:120px}header{align-items:flex-start;gap:15px}.actions{flex-direction:column;align-items:flex-end}}