:root{--wb:#4338ca;--wb-dark:#25205f;--ink:#172033;--muted:#67728a;--surface:#f5f7fb}*{box-sizing:border-box}body{background:var(--surface);color:var(--ink)}.wb-nav{background:linear-gradient(120deg,var(--wb-dark),var(--wb))}.login-page{min-height:100vh;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 15% 10%,#c7d2fe,transparent 35%),linear-gradient(135deg,#eef2ff,#f8fafc)}.login-card{width:min(440px,100%);border-radius:1.25rem}.brand-mark{width:64px;height:64px;border-radius:18px;margin:auto;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--wb),#7c3aed);font-size:1.8rem}.metric{height:100%;padding:1.2rem;border-radius:1rem;background:#fff;box-shadow:0 6px 24px #1e293b10}.metric span{display:block;color:var(--muted);font-size:.85rem}.metric strong{display:block;font-size:1.8rem;margin-top:.25rem}.chat-shell{height:calc(100vh - 56px);display:grid;grid-template-columns:330px minmax(420px,1fr) 280px;background:#fff}.queue-panel,.contact-panel{overflow:auto;background:#fff}.queue-panel{border-right:1px solid #e5e7eb}.contact-panel{border-left:1px solid #e5e7eb;padding:1.25rem}.queue-list{overflow:auto}.queue-item{padding:1rem;border-bottom:1px solid #edf0f5;cursor:pointer}.queue-item:hover,.queue-item.active{background:#eef2ff}.queue-item p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:.35rem 0;color:var(--muted)}.message-panel{display:grid;grid-template-rows:auto 1fr auto;min-width:0;background:#f1f5f9}.chat-header{min-height:70px;padding:1rem;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between}.messages{padding:1.5rem;overflow:auto}.bubble{max-width:70%;padding:.65rem .85rem;border-radius:1rem;margin:.5rem 0;box-shadow:0 2px 8px #1e293b12}.bubble.in{background:#fff;border-bottom-left-radius:.25rem}.bubble.out{background:#dbeafe;margin-left:auto;border-bottom-right-radius:.25rem}.bubble small{display:block;color:var(--muted);text-align:right;margin-top:.25rem}.composer{display:flex;gap:.5rem;padding:1rem;background:#fff;border-top:1px solid #e5e7eb}.empty-state{min-height:240px;display:grid;place-content:center;text-align:center;color:var(--muted)}.empty-state i{font-size:2.5rem}@media(max-width:1000px){.chat-shell{grid-template-columns:300px 1fr}.contact-panel{display:none}}@media(max-width:700px){.chat-shell{grid-template-columns:1fr}.message-panel{display:none}.chat-shell.chat-open .queue-panel{display:none}.chat-shell.chat-open .message-panel{display:grid}.bubble{max-width:88%}}