:root{--bg:#f7f7f7;--surface:#fff;--surface-muted:#fafafa;--ink:#141414;--muted:#777;--line:#e5e5e5;--brand:#141414;--brand-strong:#000;--accent:#ec149e;--accent-hot:#ff7a00;--accent-lime:#a6ff00;--amber:#f59e0b;--danger:#dc2626;--success:#22c55e;--shadow:0 16px 40px #14141414}*{box-sizing:border-box}html,body{min-height:100%}body{background:var(--bg);color:var(--ink);letter-spacing:0;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}.login-shell{grid-template-columns:minmax(320px,440px) minmax(0,1fr);min-height:100vh;display:grid}.login-panel{background:var(--surface);align-content:center;padding:48px;display:grid}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.brand-kicker,.eyebrow{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin:0 0 4px;font-size:12px;font-weight:800}.brand-mark{aspect-ratio:1;background:linear-gradient(135deg, var(--accent), var(--accent-hot), var(--accent-lime));color:#fff;border-radius:8px;flex:0 0 48px;justify-content:center;align-items:center;width:48px;display:inline-flex}.brand-logo{align-items:center;min-width:0;display:flex}.brand-logo img{object-fit:contain;width:100%;height:auto;display:block}.hero-logo{width:min(390px,100%);max-width:390px}.header-logo{width:min(250px,46vw);max-width:250px}.loading-logo{width:min(300px,80vw);max-width:300px}.login-form{gap:18px;margin-top:42px;display:grid}.login-form label,.mini-form{gap:8px;display:grid}.login-form label span{color:#334155;font-size:14px;font-weight:700}.input-with-icon,.search-box{background:var(--surface-muted);border:1px solid var(--line);color:var(--muted);border-radius:8px;align-items:center;gap:10px;min-height:48px;padding:0 14px;display:flex}.input-with-icon input,.search-box input,.mini-form input,.mini-form select{color:var(--ink);background:0 0;border:0;outline:0;width:100%;min-width:0}.primary-action,.secondary-action,.send-button,.icon-button{border:0;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:40px;font-weight:800;transition:background .15s,border-color .15s,transform .15s;display:inline-flex}.primary-action{background:var(--brand);color:#fff;min-height:48px;padding:0 18px}.primary-action:hover,.send-button:hover{background:#2a2a2a}.secondary-action{border:1px solid var(--line);color:var(--brand);background:#fff;padding:0 12px}.secondary-action:hover,.icon-button:hover{color:var(--accent);border-color:#ec149e73}.secondary-action.danger{color:var(--danger);background:#fff1f2;border-color:#fecdd3}.secondary-action.full{width:100%}.icon-button{aspect-ratio:1;background:var(--surface-muted);border:1px solid var(--line);color:var(--ink);width:40px}.primary-action:disabled,.send-button:disabled{cursor:not-allowed;opacity:.55}.form-error,.notice{color:#be123c;background:#fff1f2;border:1px solid #fecdd3;border-radius:8px;margin:0;padding:10px 12px}.notice{margin:0 18px}.login-aside{color:#fff;background:linear-gradient(135deg,#141414f5,#141414b8),radial-gradient(circle at 22% 35%,#ec149e8c,#0000 30%),radial-gradient(circle at 48% 58%,#ff7a007a,#0000 28%),radial-gradient(circle at 76% 42%,#a6ff0085,#0000 32%);align-content:end;gap:24px;padding:64px;display:grid}.login-aside h2{max-width:720px;margin:0;font-size:42px;line-height:1}.login-aside p{color:#ffffffc7;max-width:620px;margin:0;font-size:18px;line-height:1.6}.signal-grid{grid-template-columns:repeat(3,52px);gap:10px;display:grid}.signal-grid span{aspect-ratio:1;background:#ffffff24;border:1px solid #ffffff2e;border-radius:8px}.loading-screen{justify-content:center;align-items:center;gap:14px;min-height:100vh;display:grid}.app-shell{grid-template-rows:auto minmax(0,1fr);height:100vh;display:grid;overflow:hidden}.topbar{border-bottom:1px solid var(--line);background:#ffffffeb;justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.topbar-actions{align-items:center;gap:10px;min-width:0;display:flex}.instance-pill,.user-pill{background:var(--surface-muted);border:1px solid var(--line);color:#334155;white-space:nowrap;border-radius:999px;align-items:center;gap:7px;min-height:36px;padding:0 12px;font-size:13px;font-weight:800;display:inline-flex}.instance-pill.online{color:var(--success);background:#ecfdf5;border-color:#a7f3d0}.instance-pill.offline,.instance-pill.pending{color:var(--amber);background:#fff7ed;border-color:#fed7aa}.workspace{grid-template-columns:minmax(290px,360px) minmax(420px,1fr) minmax(280px,340px);gap:14px;min-height:0;padding:14px;display:grid}.conversation-panel,.chat-panel,.side-panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;min-height:0}.conversation-panel,.side-panel{flex-direction:column;display:flex;overflow:hidden}.panel-heading,.chat-header{justify-content:space-between;align-items:center;padding:18px;display:flex}.panel-heading h2,.chat-header h2{margin:0;font-size:19px;line-height:1.2}.compact-heading{padding:0 0 14px}.search-box{margin:0 18px 12px}.filter-row{grid-template-columns:repeat(3,1fr);gap:6px;padding:0 18px 12px;display:grid}.filter-row button{background:var(--surface-muted);border:1px solid var(--line);color:#475569;border-radius:8px;min-height:34px;font-size:12px;font-weight:800}.filter-row button.active{color:var(--accent);background:#ec149e14;border-color:#ec149e52}.metric-strip{grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 14px;display:grid}.metric-strip span{background:var(--surface-muted);border:1px solid var(--line);color:#475569;border-radius:8px;justify-content:center;align-items:center;gap:6px;min-height:34px;font-size:12px;font-weight:800;display:flex}.conversation-list{gap:8px;padding:0 10px 12px;display:grid;overflow:auto}.conversation-item{color:inherit;text-align:left;background:#fff;border:1px solid #0000;border-radius:8px;grid-template-columns:42px minmax(0,1fr) auto;align-items:start;gap:10px;width:100%;padding:10px;display:grid}.conversation-item:hover,.conversation-item.selected{background:#f8fbfd;border-color:#bfd7ea}.avatar{aspect-ratio:1;color:#b31378;text-transform:uppercase;background:linear-gradient(135deg,#ec149e24,#ff7a0029);border-radius:8px;justify-content:center;align-items:center;width:42px;font-weight:900;display:flex}.avatar.small{width:34px}.conversation-copy{min-width:0}.conversation-title{justify-content:space-between;align-items:center;gap:8px;display:flex}.conversation-title strong,.agent-row strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;display:block;overflow:hidden}.conversation-title time{color:var(--muted);flex:none;font-size:12px}.conversation-copy p{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin:4px 0 8px;font-size:13px;line-height:1.35;overflow:hidden}.conversation-meta{color:#64748b;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;display:flex}.status-dot{align-items:center;gap:4px;display:inline-flex}.status-dot.open{color:var(--accent)}.status-dot.assigned{color:var(--success)}.status-dot.waiting{color:var(--amber)}.status-dot.closed{color:#64748b}.count-badge{background:var(--brand);color:#fff;border-radius:999px;justify-content:center;align-items:center;min-width:22px;height:22px;padding:0 6px;font-size:11px;font-weight:900;display:flex}.empty-state,.empty-chat{color:var(--muted);text-align:center;place-items:center;min-height:180px;padding:24px;display:grid}.empty-chat h2{color:var(--ink);margin:10px 0 0}.empty-chat p,.empty-state p{margin:6px 0 0}.chat-panel{grid-template-rows:auto minmax(0,1fr) auto auto;display:grid;overflow:hidden}.chat-header{border-bottom:1px solid var(--line)}.phone-line{color:var(--muted);align-items:center;gap:6px;margin-top:8px;font-size:13px;display:flex}.chat-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.message-list{background:linear-gradient(#ffffffdb,#ffffffdb),linear-gradient(135deg,#ec149e33,#ff7a0029,#a6ff002e);align-content:start;gap:10px;padding:18px;display:grid;overflow:auto}.message-bubble{border-radius:8px;max-width:min(70%,620px);padding:10px 12px;box-shadow:0 8px 18px #0f172a14}.message-bubble.inbound{background:#fff;justify-self:start}.message-bubble.outbound{background:#efffd9;justify-self:end}.message-bubble span{color:var(--brand-strong);margin-bottom:4px;font-size:12px;font-weight:900;display:block}.message-bubble p{overflow-wrap:anywhere;margin:0;font-size:14px;line-height:1.45}.message-bubble time{color:#64748b;text-align:right;margin-top:6px;font-size:11px;display:block}.composer{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;display:grid}.composer textarea{background:var(--surface-muted);border:1px solid var(--line);resize:vertical;border-radius:8px;outline:0;min-height:54px;padding:12px}.send-button{background:linear-gradient(135deg, var(--accent), var(--accent-hot));color:#fff;align-self:stretch;min-width:116px;padding:0 16px}.side-panel{gap:18px;padding:18px;overflow:auto}.agent-list,.activity-list{gap:10px;display:grid}.agent-row{background:var(--surface-muted);border:1px solid var(--line);border-radius:8px;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;display:grid}.agent-row span,.activity-item span,.muted{color:var(--muted);margin-top:2px;font-size:12px;display:block}.presence{background:#cbd5e1;border-radius:999px;width:10px;height:10px}.presence.online{background:var(--success);box-shadow:0 0 0 4px #05966924}.create-user-box{border-bottom:1px solid var(--line);border-top:1px solid var(--line);padding:18px 0}.mini-form input,.mini-form select{background:var(--surface-muted);border:1px solid var(--line);border-radius:8px;min-height:40px;padding:0 10px}.activity-item{border-left:3px solid #bfdbfe;padding:2px 0 2px 10px}.activity-item strong{font-size:13px;display:block}@media (max-width:1180px){.workspace{grid-template-columns:minmax(260px,330px) minmax(0,1fr)}.side-panel{display:none}}@media (max-width:820px){.login-shell{grid-template-columns:1fr}.login-panel{padding:32px 22px}.login-aside{display:none}.app-shell{height:auto;min-height:100vh;overflow:visible}.topbar{align-items:flex-start;gap:12px}.topbar-actions{flex-wrap:wrap;justify-content:flex-end}.user-pill{display:none}.workspace{grid-template-columns:1fr}.conversation-panel,.chat-panel{min-height:520px}.chat-actions{justify-content:flex-start;margin-top:12px}.chat-header{align-items:flex-start;display:block}.message-bubble{max-width:86%}.composer{grid-template-columns:1fr}}
