:root{--bg: #0b0d13;--bg-2: #11141c;--panel: #151823;--panel-2: #1c2030;--panel-3: #232838;--border: #262b3c;--border-soft: #1e2230;--text: #e8ecf3;--text-soft: #c4cad6;--muted: #7b8499;--muted-2: #555c6e;--accent: #6366f1;--accent-2: #8b5cf6;--accent-glow: rgba(99, 102, 241, .35);--ok: #10b981;--warn: #f59e0b;--err: #ef4444;--visitor-bubble: #1f2433;--agent-bubble: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)}*{box-sizing:border-box}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}*::-webkit-scrollbar-thumb:hover{background:var(--panel-3)}html,body,#root{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:radial-gradient(circle at 0% 0%,rgba(99,102,241,.08) 0%,transparent 50%),radial-gradient(circle at 100% 100%,rgba(139,92,246,.06) 0%,transparent 50%),var(--bg)}button{cursor:pointer;font-family:inherit}input,textarea{font-family:inherit}.login-wrap{display:grid;place-items:center;height:100%;background:radial-gradient(circle at 30% 20%,rgba(99,102,241,.12) 0%,transparent 40%),radial-gradient(circle at 70% 80%,rgba(139,92,246,.1) 0%,transparent 40%)}.login-card{background:linear-gradient(180deg,#1c2030e6,#151823f2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:36px 32px;border-radius:16px;width:380px;border:1px solid var(--border);box-shadow:0 24px 48px -16px #00000080,0 0 0 1px #ffffff05 inset}.login-card .brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}.login-card .brand .logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;box-shadow:0 8px 16px -4px var(--accent-glow)}.login-card .brand h1{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}.login-card .brand .sub{font-size:11px;color:var(--muted);margin-top:2px}.login-card label{display:block;font-size:11px;color:var(--muted);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}.login-card input{width:100%;padding:11px 14px;background:var(--bg-2);border:1px solid var(--border);color:var(--text);border-radius:10px;transition:border-color .15s,box-shadow .15s;outline:none}.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.login-card button{width:100%;padding:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:0;color:#fff;border-radius:10px;font-weight:600;font-size:14px;margin-top:20px;transition:transform .1s,box-shadow .15s,opacity .15s;box-shadow:0 8px 16px -6px var(--accent-glow)}.login-card button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 24px -8px var(--accent-glow)}.login-card button:disabled{opacity:.6;cursor:not-allowed}.login-card .err{color:var(--err);font-size:12px;margin-top:12px;padding:8px 12px;background:#ef44441a;border:1px solid rgba(239,68,68,.25);border-radius:8px}.login-card .hint{text-align:center;font-size:11px;color:var(--muted-2);margin-top:16px}.app{display:grid;grid-template-columns:300px 1fr 320px;height:100%}.sidebar{background:var(--panel);border-right:1px solid var(--border);overflow:auto;display:flex;flex-direction:column}.sidebar header{padding:16px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:12px;position:sticky;top:0;background:var(--panel);z-index:5}.sidebar header .avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0;box-shadow:0 0 0 2px var(--panel),0 0 0 3px var(--accent),0 4px 12px -4px var(--accent-glow)}.sidebar header .who{flex:1;min-width:0}.sidebar header .who .name{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar header .who .email{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar header .logout-btn{background:transparent;color:var(--muted);border:1px solid var(--border);padding:6px 10px;border-radius:8px;font-size:11px;transition:all .15s}.sidebar header .logout-btn:hover{color:var(--err);border-color:var(--err)}.shift-toggle{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-soft);background:var(--bg-2)}.shift-toggle .label{flex:1;font-size:13px;font-weight:500}.shift-toggle .label small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:2px}.dot{width:10px;height:10px;border-radius:50%;background:var(--muted-2);flex-shrink:0;box-shadow:0 0 0 3px #7b849926}.dot.on{background:var(--ok);box-shadow:0 0 0 3px #10b98133;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 3px #10b98133}50%{box-shadow:0 0 0 6px #10b9810d}}.shift-toggle .switch{position:relative;width:40px;height:22px;border-radius:11px;background:var(--border);border:0;padding:0;transition:background .2s}.shift-toggle .switch:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}.shift-toggle .switch.on{background:var(--ok)}.shift-toggle .switch.on:after{transform:translate(18px)}.chat-list-wrap{flex:1;overflow:auto}.chat-list-title{padding:14px 16px 8px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600;display:flex;justify-content:space-between;align-items:center}.chat-list-title .count{background:var(--panel-3);padding:2px 8px;border-radius:10px;font-size:10px;color:var(--text-soft)}.chat-list-empty{padding:32px 16px;text-align:center;color:var(--muted-2);font-size:12px}.chat-list-empty .icon{font-size:28px;margin-bottom:8px;opacity:.5}.chat-list-item{padding:12px 16px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;border-left:3px solid transparent;transition:background .12s;position:relative}.chat-list-item:hover{background:var(--panel-2)}.chat-list-item.active{background:linear-gradient(90deg,rgba(99,102,241,.15) 0%,transparent 100%);border-left-color:var(--accent)}.chat-list-item .av{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--panel-3);color:var(--text);font-weight:600;font-size:13px}.chat-list-item .body{flex:1;min-width:0}.chat-list-item .name{font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px}.chat-list-item .name .time{font-size:10px;color:var(--muted);font-weight:400;flex-shrink:0}.chat-list-item .preview{color:var(--muted);font-size:12px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-list-item .meta{margin-top:4px;display:flex;gap:6px}.badge{display:inline-block;padding:2px 7px;border-radius:8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.badge.active{background:#10b98126;color:var(--ok)}.badge.queued{background:#f59e0b26;color:var(--warn)}.badge.ended{background:#7b849926;color:var(--muted)}.main{display:flex;flex-direction:column;background:var(--bg);min-width:0}.main>header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--bg-2)}.main>header .who{display:flex;align-items:center;gap:12px}.main>header .av{width:40px;height:40px;border-radius:50%;background:var(--panel-3);display:grid;place-items:center;font-weight:600}.main>header .who .name{font-weight:600;font-size:15px}.main>header .who .sub{color:var(--muted);font-size:12px;margin-top:2px;font-family:JetBrains Mono,ui-monospace,monospace}.btn-end{background:#ef44441a;color:var(--err);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:7px 14px;font-size:12px;font-weight:600;transition:all .15s}.btn-end:hover{background:var(--err);color:#fff;border-color:var(--err)}.empty-main{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--muted);gap:14px;padding:20px}.empty-main .icon{width:80px;height:80px;border-radius:24px;background:var(--panel);border:1px solid var(--border);display:grid;place-items:center;color:var(--accent)}.empty-main .title{font-size:16px;font-weight:600;color:var(--text-soft)}.empty-main .desc{font-size:13px;color:var(--muted);max-width:320px;text-align:center}.msgs{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:6px}.msg{max-width:65%;padding:10px 14px;border-radius:16px;word-wrap:break-word;font-size:13.5px;line-height:1.45;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.msg.visitor{background:var(--visitor-bubble);align-self:flex-start;border-bottom-left-radius:6px}.msg.agent{background:var(--agent-bubble);color:#fff;align-self:flex-end;border-bottom-right-radius:6px;box-shadow:0 4px 12px -4px var(--accent-glow)}.msg.system{background:transparent;color:var(--muted);align-self:center;font-size:11px;padding:4px 12px;border:1px dashed var(--border);border-radius:10px}.msg .who{font-size:10px;opacity:.7;margin-bottom:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.msg .time{font-size:10px;opacity:.6;margin-top:4px}.msg+.msg.visitor,.msg+.msg.agent{margin-top:2px}.composer{padding:14px 20px;border-top:1px solid var(--border);background:var(--bg-2);display:flex;gap:10px;align-items:flex-end}.composer textarea{flex:1;resize:none;padding:11px 14px;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;min-height:44px;max-height:140px;font-size:13.5px;line-height:1.5;outline:none;transition:border-color .15s,box-shadow .15s}.composer textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.composer textarea::placeholder{color:var(--muted-2)}.composer button{width:44px;height:44px;flex-shrink:0;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:0;color:#fff;border-radius:12px;display:grid;place-items:center;box-shadow:0 6px 14px -4px var(--accent-glow);transition:transform .1s}.composer button:hover:not(:disabled){transform:translateY(-1px)}.composer button:disabled{opacity:.4;cursor:not-allowed}.info{background:var(--panel);border-left:1px solid var(--border);padding:20px;overflow:auto}.info h3{margin:0 0 14px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}.info-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 10px;color:var(--muted-2);font-size:12px;text-align:center}.info .v-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0 20px;border-bottom:1px solid var(--border-soft);margin-bottom:16px}.info .v-hero .av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:grid;place-items:center;color:#fff;font-weight:700;font-size:22px;box-shadow:0 8px 20px -6px var(--accent-glow)}.info .v-hero .name{font-size:15px;font-weight:600}.info .v-hero .email{color:var(--muted);font-size:12px}.info dl{display:grid;grid-template-columns:1fr;gap:12px;margin:0}.info dt{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:2px}.info dd{margin:0;font-size:13px;color:var(--text-soft)}@media (max-width: 1024px){.app{grid-template-columns:260px 1fr}.info{display:none}}@media (max-width: 720px){.app{grid-template-columns:1fr}.sidebar{display:none}}.property-group{margin-bottom:12px}.property-header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 6px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted-2);background:#6366f10f;border-radius:6px;margin:0 8px 4px}.property-header .count{background:var(--brand);color:#fff;padding:1px 7px;border-radius:10px;font-size:10px;min-width:18px;text-align:center}