:root{--green:#14a37f;--green-dark:#0c8467;--ink:#18212a;--muted:#75808b;--line:#e7ebee;--surface:#fff;--soft:#f5f7f8;--chat:#efeae2}*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink)}button,input,textarea{font:inherit}button{cursor:pointer}.login-page{display:grid;place-items:center;background:linear-gradient(145deg,#eaf8f3 0 45%,#f6f7f8 45%)}.login-card{width:min(420px,calc(100% - 32px));padding:42px;background:#fff;border-radius:20px;box-shadow:0 20px 70px #174d3d20}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--green);color:#fff;font-weight:800;font-size:22px}.brand-mark.small{width:38px;height:38px;border-radius:11px}.brand small,.brand strong{display:block}.brand small{color:var(--muted);margin-top:3px}.login-card h1{margin:34px 0 8px;font-size:26px}.muted,.login-help{color:var(--muted)}.login-card form{display:grid;gap:18px;margin-top:28px}.login-card label{font-size:13px;font-weight:650}.login-card input{display:block;width:100%;margin-top:8px;padding:13px 14px;border:1px solid #d9dfe3;border-radius:10px;outline:none}.login-card input:focus{border-color:var(--green);box-shadow:0 0 0 3px #14a37f18}.primary{padding:14px;border:0;border-radius:10px;background:var(--green);color:#fff;font-weight:700}.primary:hover{background:var(--green-dark)}.login-help{text-align:center;font-size:12px;margin:22px 0 0}.alert{padding:12px;background:#fff0ef;color:#b43c34;border-radius:8px;margin-top:18px;font-size:13px}#app{height:100%;display:grid;grid-template-columns:72px 360px minmax(400px,1fr) 0;overflow:hidden;background:#fff}.rail{background:#1d292f;display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:14px}.rail-btn{width:42px;height:42px;border:0;border-radius:11px;background:transparent;color:#aeb9bd;font-size:21px}.rail-btn:hover,.rail-btn.active{background:#ffffff14;color:#fff}.rail-spacer{flex:1}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--avatar,#607d8b);color:#fff;text-decoration:none;font-weight:700}.sidebar{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}.sidebar-head{height:82px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between}.sidebar h1{font-size:21px;margin:0}.sidebar-head small{display:block;color:var(--muted);margin-top:4px}.icon-btn{border:0;background:transparent;color:#64717b;font-size:22px}.search{margin:0 16px 12px;background:var(--soft);border-radius:9px;padding:10px 12px;display:flex;gap:9px}.search input{width:100%;border:0;outline:0;background:transparent}.filters{padding:0 16px 12px;display:flex;gap:7px;border-bottom:1px solid var(--line)}.filters button{border:1px solid var(--line);background:#fff;color:#64717b;padding:6px 10px;border-radius:15px;font-size:12px}.filters button.active{color:var(--green-dark);background:#eaf8f3;border-color:#d5eee6}.conversation-list{flex:1;overflow:auto}.conversation{width:100%;border:0;background:#fff;display:flex;gap:12px;padding:13px 16px;text-align:left}.conversation:hover,.conversation.active{background:#f2f7f5}.contact-avatar{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--avatar,#78909c);color:#fff;font-weight:700}.conversation-body{min-width:0;flex:1;border-bottom:1px solid #f0f2f3;padding-bottom:13px}.conversation-top,.conversation-bottom{display:flex;justify-content:space-between;gap:8px}.conversation-top strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-top time{font-size:11px;color:#8b949b}.conversation-bottom{margin-top:6px;color:#77828a;font-size:12px}.conversation-bottom>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-bottom b{background:var(--green);color:#fff;border-radius:12px;min-width:19px;height:19px;padding:2px 5px;text-align:center}.empty-list,.chat-loading{padding:35px;text-align:center;color:var(--muted);font-size:13px}.agent-status{height:66px;padding:10px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}.agent-status strong,.agent-status small{display:block;font-size:12px}.agent-status small{color:var(--muted);margin-top:3px}.status-dot{width:9px;height:9px;border-radius:50%;background:#20bf6b}.chat{background-color:var(--chat);background-image:radial-gradient(#b8b1a8 0.6px,transparent .6px);background-size:11px 11px;display:flex;flex-direction:column;min-width:0}.chat.empty{display:grid;place-items:center}.welcome{text-align:center;color:#657077}.welcome-icon{font-size:54px;color:var(--green)}.welcome h2{color:#344047;font-weight:500}.welcome p{margin-bottom:25px}.welcome small{border-top:1px solid #d7d5d0;padding-top:15px}.chat-head{height:72px;flex:none;background:#f7f9f9;display:flex;align-items:center;padding:0 20px;gap:12px;border-bottom:1px solid #dde2e3}.chat-head .contact-avatar{width:42px;height:42px}.chat-head strong,.chat-head small{display:block}.chat-head small{color:var(--muted);margin-top:4px;font-size:12px}.head-spacer{flex:1}.assigned{font-size:12px;color:#69757c}.assign-btn{border:1px solid var(--green);color:var(--green-dark);background:#fff;padding:8px 12px;border-radius:8px}.messages{flex:1;overflow:auto;padding:22px clamp(20px,7%,80px)}.date-chip{width:max-content;margin:0 auto 18px;background:#fff;padding:6px 11px;border-radius:7px;box-shadow:0 1px 2px #00000015;font-size:11px;color:#677178}.message-row{display:flex;margin:4px 0}.message-row.outbound{justify-content:flex-end}.message{max-width:min(70%,640px);background:#fff;border-radius:4px 10px 10px 10px;padding:8px 10px 6px;box-shadow:0 1px 1px #00000018}.outbound .message{background:#d9fdd3;border-radius:10px 4px 10px 10px}.message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.4}.message>span{display:block;text-align:right;font-size:10px;color:#718078;margin:3px 0 0 20px}.composer{min-height:64px;background:#f5f7f7;display:flex;align-items:center;padding:10px 18px;gap:10px}.composer button{border:0;background:transparent;color:#65727a;font-size:24px}.composer textarea{flex:1;border:0;resize:none;outline:0;border-radius:10px;padding:11px 14px;max-height:100px}.composer .send{width:42px;height:42px;background:var(--green);color:#fff;border-radius:50%;font-size:17px}.details{position:absolute;right:0;top:0;width:0;height:100%;overflow:hidden;background:#fff;box-shadow:-10px 0 30px #00000012;transition:.2s;z-index:5}.details.open{width:320px;padding:22px}.details-close{border:0;background:transparent;font-size:26px;color:#718078}.details-empty{padding:50px 20px;color:var(--muted)}.profile{text-align:center;padding:24px 0;border-bottom:1px solid var(--line)}.contact-avatar.big{width:72px;height:72px;margin:auto;font-size:20px}.profile h3{margin:14px 0 4px}.profile p{margin:0;color:var(--muted)}.detail-block{padding:18px 4px;border-bottom:1px solid var(--line)}.detail-block label{display:block;font-size:11px;color:var(--muted);margin-bottom:7px}.detail-block p,.detail-block strong{font-size:13px;margin:0}#toast{position:fixed;left:50%;bottom:-60px;transform:translateX(-50%);background:#263238;color:#fff;padding:11px 18px;border-radius:8px;transition:.2s;z-index:20;font-size:13px}#toast.show{bottom:22px}@media(max-width:800px){#app{grid-template-columns:0 100% 100%;overflow-x:hidden}.rail{display:none}.sidebar:has(~.chat:not(.empty)){display:none}.details.open{width:100%}.chat-head .assigned{display:none}}@media(max-width:460px){.login-card{padding:28px}.message{max-width:85%}}