:root{--navy: #10002E;--purple: #8000FF;--gold: #EFD45E;--bg: #f7f7f8;--panel: #ffffff;--border: #e5e5ea;--text: #1a1a1a;--muted: #6b6b76;--visitor: #f0eef5;--bot: #fffbe6;--agent: #e6f0ff;--system: #fafafa}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Open Sans,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text)}h1,h2,h3,button{font-family:Work Sans,Open Sans,sans-serif}.app{display:flex;height:100vh}.sidebar{width:360px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column}.sidebar header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.sidebar header h1{margin:0;font-size:16px}.sidebar .filters{padding:10px 12px;display:flex;gap:8px;border-bottom:1px solid var(--border)}.sidebar .filters button{padding:5px 10px;font-size:12px;border-radius:14px;border:1px solid var(--border);background:#fff;cursor:pointer}.sidebar .filters button.active{background:var(--navy);color:#fff;border-color:var(--navy)}.sidebar ul.conv-list{list-style:none;padding:0;margin:0;overflow-y:auto;flex:1}.sidebar ul.conv-list li{padding:10px 14px;border-bottom:1px solid var(--border);cursor:pointer}.sidebar ul.conv-list li.active{background:#f0eef5;border-left:3px solid var(--purple);padding-left:11px}.sidebar ul.conv-list li .row1{display:flex;justify-content:space-between;font-size:13px;font-weight:600}.sidebar ul.conv-list li .row2{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;margin-top:2px}.sidebar ul.conv-list li .pill{font-size:10px;padding:1px 6px;border-radius:8px;background:#ececef}.sidebar ul.conv-list li .pill.bot{background:var(--bot)}.sidebar ul.conv-list li .pill.queued{background:#fff0f0;color:#b00020}.sidebar ul.conv-list li .pill.assigned{background:var(--agent)}.main{flex:1;display:flex;flex-direction:column}.main header{padding:14px 18px;border-bottom:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:space-between}.main header .meta{font-size:12px;color:var(--muted)}.main header .actions button{margin-left:8px;padding:6px 12px;font-size:13px;border-radius:6px;border:1px solid var(--border);background:#fff;cursor:pointer}.main header .actions button.primary{background:var(--navy);color:#fff;border-color:var(--navy)}.transcript{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}.bubble{max-width:70%;padding:9px 13px;border-radius:12px;font-size:14px;line-height:1.45;word-wrap:break-word}.bubble.visitor{background:var(--visitor);align-self:flex-start;border-bottom-left-radius:4px}.bubble.bot{background:var(--bot);align-self:flex-start;border-bottom-left-radius:4px}.bubble.agent{background:var(--agent);align-self:flex-end;border-bottom-right-radius:4px}.bubble.system{background:var(--system);align-self:center;color:var(--muted);font-size:12px;padding:4px 8px;max-width:90%}.bubble strong{display:block;font-size:11px;color:var(--muted);margin-bottom:3px;font-weight:600}.composer{border-top:1px solid var(--border);padding:12px;background:#fff;display:flex;gap:8px}.composer textarea{flex:1;resize:none;padding:10px 12px;font-size:14px;border:1px solid var(--border);border-radius:8px;min-height:38px;max-height:120px;font-family:inherit}.composer button{padding:0 18px;background:var(--navy);color:#fff;border:0;border-radius:8px;cursor:pointer;font-weight:600}.login{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg)}.login form{background:#fff;padding:32px;border-radius:12px;box-shadow:0 8px 32px #00000014;width:360px}.login h1{margin:0 0 6px;font-size:22px}.login p{margin:0 0 18px;color:var(--muted);font-size:14px}.login input{width:100%;padding:12px 14px;font-size:14px;border:1px solid var(--border);border-radius:6px;margin-bottom:12px}.login button{width:100%;padding:12px;background:var(--navy);color:#fff;border:0;border-radius:6px;font-weight:600;cursor:pointer}.empty{padding:60px 40px;color:var(--muted);text-align:center;font-size:14px}