:root{color:#172033;font-synthesis:none;background:#f5f7fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}.login{background:radial-gradient(circle at 20% 10%,#dff7ef,#0000 30%),#f5f7fb;place-items:center;min-height:100vh;display:grid}.card{background:#fff;border-radius:20px;width:min(420px,100% - 32px);padding:40px;box-shadow:0 24px 70px #17203318}.brand{color:#fff;background:#10b981;border-radius:16px;place-items:center;width:52px;height:52px;font-size:25px;font-weight:800;display:grid;box-shadow:0 10px 25px #10b98140}.brand.small{width:38px;height:38px;box-shadow:none;border-radius:11px;font-size:19px}.card h1{margin:22px 0 6px}.card>p{color:#697386;margin:0 0 26px}.card label{margin:15px 0;font-size:13px;font-weight:700;display:block}.card input{border:1px solid #d8deea;border-radius:10px;outline:none;width:100%;margin-top:7px;padding:12px;display:block}.card input:focus{border-color:#10b981;box-shadow:0 0 0 3px #10b98118}.card button,.composer button{color:#fff;cursor:pointer;background:#10b981;border:0;border-radius:10px;width:100%;padding:13px;font-weight:750}.error{color:#b42318;background:#fef3f2;border-radius:8px;padding:10px;font-size:13px}.app{background:#fff;grid-template-columns:340px 1fr;height:100vh;display:grid}aside{background:#fafbfc;border-right:1px solid #e7eaf0;flex-direction:column;min-width:0;display:flex}aside>header{color:#fff;background:#172033;align-items:center;gap:12px;height:72px;padding:16px 20px;display:flex}aside header div:last-child{flex-direction:column;display:flex}.status{color:#a8b1c0;font-size:11px}.status.on{color:#6ee7b7}.tabs{gap:8px;padding:15px 15px 8px;display:flex}.tabs button{color:#697386;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:8px 12px}.tabs button.active{color:#087f5b;background:#e6f8f2;font-weight:700}.chat-list{flex:1;padding:6px 10px;overflow:auto}.chat{text-align:left;cursor:pointer;color:#172033;background:0 0;border:0;border-radius:12px;width:100%;margin-bottom:5px;padding:14px;display:block}.chat:hover,.chat.active{background:#fff;box-shadow:0 5px 20px #1720330d}.chat.active{box-shadow:inset 3px 0 #10b981,0 5px 20px #1720330d}.chat div{justify-content:space-between;gap:10px;display:flex}.chat time{color:#8b94a4;font-size:11px}.chat p{white-space:nowrap;text-overflow:ellipsis;margin:8px 0 4px;font-size:13px;overflow:hidden}.chat small{color:#8b94a4;white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.empty{text-align:center;color:#8b94a4;padding:30px}.logout{color:#697386;cursor:pointer;background:0 0;border:0;margin:12px;padding:10px}.conversation{background:#fff;flex-direction:column;min-width:0;display:flex}.conversation>header{border-bottom:1px solid #e7eaf0;justify-content:space-between;align-items:center;height:72px;padding:12px 24px;display:flex}.conversation h2{margin:0;font-size:17px}.conversation header p{color:#8b94a4;margin:5px 0 0;font-size:12px}.actions{gap:8px;display:flex}.actions button{cursor:pointer;background:#fff;border:1px solid #d8deea;border-radius:8px;padding:8px 12px}.actions .resolve{color:#b42318}.messages{background:#f8fafc;flex-direction:column;flex:1;gap:12px;padding:25px;display:flex;overflow:auto}.message{align-self:flex-start;max-width:min(650px,75%)}.message p{white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border-radius:4px 15px 15px;margin:0;padding:12px 15px;box-shadow:0 3px 10px #1720330a}.message.agent{align-self:flex-end}.message.agent p{color:#fff;background:#10b981;border-radius:15px 4px 15px 15px}.message time{color:#98a1b1;margin:4px 5px;font-size:10px;display:block}.message.agent time{text-align:right}.composer{border-top:1px solid #e7eaf0;grid-template-columns:1fr 90px;gap:10px;padding:15px 20px;display:grid}.composer textarea{resize:none;border:1px solid #d8deea;border-radius:10px;outline:none;min-height:48px;max-height:120px;padding:12px}.composer button{width:auto}.welcome{text-align:center;color:#697386;margin:auto}.welcome .brand{margin:auto}.welcome h1{color:#172033;margin-bottom:6px}@media (width<=750px){.app{grid-template-columns:120px 1fr}aside>header strong,.status,.chat p,.chat small,.chat time,.logout{display:none}.chat{text-align:center;padding:12px 5px}.chat div{display:block}.tabs{flex-direction:column;padding:8px}.tabs button{font-size:11px}.conversation>header{padding:10px}.actions button{padding:7px;font-size:11px}.messages{padding:12px}.composer{grid-template-columns:1fr 65px;padding:10px}}