@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --ink:#202337; --muted:#7c8095; --light:#f7f7fc; --line:#ebebf3; --purple:#6558e8; --purple-dark:#5044cf; --teal:#20a99b; --green:#2fbf89; --rose:#f27889; --amber:#f5ad45; --shadow:0 14px 35px rgba(34,31,76,.07); }
*{box-sizing:border-box} body{margin:0;background:#fbfbfe;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}.shell{min-height:100vh;display:flex}.sidebar{width:248px;min-height:100vh;background:#fff;border-right:1px solid var(--line);padding:29px 15px 17px;display:flex;flex-direction:column;position:fixed;z-index:10}.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px;font-family:Manrope,sans-serif;font-size:21px;font-weight:800;padding:0 10px 33px}.brand b{color:var(--purple)}.brand-mark{width:28px;height:28px;display:flex;align-items:flex-end;gap:3px;background:#eeecff;border-radius:9px;padding:6px}.brand-mark i{display:block;flex:1;background:var(--purple);border-radius:3px}.brand-mark i:nth-child(1){height:44%}.brand-mark i:nth-child(2){height:100%}.brand-mark i:nth-child(3){height:68%}.nav-list{display:grid;gap:5px}.nav-item{font:600 14px 'DM Sans',sans-serif;color:#696d80;background:transparent;border:0;border-radius:9px;height:43px;text-align:left;padding:0 11px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:.2s}.nav-item:hover{background:#f7f6ff;color:var(--purple)}.nav-item.active{background:#f0efff;color:#574bd3}.nav-icon{font-family:Arial,sans-serif;font-size:19px;width:18px;text-align:center;font-weight:400}.nav-item em{font-style:normal;background:#e9e7fe;color:#5f53d8;font-size:11px;border-radius:9px;padding:2px 6px;margin-left:auto}.sidebar-footer{margin-top:auto;border-top:1px solid var(--line);padding-top:13px}.workspace-card{display:flex;align-items:center;gap:9px;padding:17px 9px 0}.workspace-card b{font-size:12px;display:block}.workspace-card small{color:var(--muted);font-size:11px}.workspace-avatar,.avatar{background:linear-gradient(135deg,#6558e8,#9d8dff);color:white;border-radius:9px;width:30px;height:30px;display:grid;place-items:center;font-weight:700;font-size:12px}.dots{border:0;background:transparent;color:#7a7d91;font-size:19px;cursor:pointer;margin-left:auto}.main-content{margin-left:248px;width:calc(100% - 248px);padding:0 42px 45px}.topbar{height:94px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;margin-bottom:36px}.breadcrumb{display:flex;align-items:baseline;gap:12px}.breadcrumb span,.overline{font-size:10px;color:#999caf;font-weight:700;letter-spacing:1px}.breadcrumb h1{font:700 14px Manrope,sans-serif;margin:0;color:#4c5064}.top-actions{display:flex;align-items:center;gap:14px}.icon-button,.help-button{border:1px solid var(--line);background:white;border-radius:9px;width:34px;height:34px;color:#777b91;display:grid;place-items:center;cursor:pointer;font-size:16px;position:relative}.help-button{font-weight:700;font-size:14px}.notification-dot{width:6px;height:6px;border-radius:50%;background:#f16c7d;position:absolute;top:7px;right:7px;border:1px solid white}.avatar{width:35px;height:35px;border-radius:50%;background:#fff0e3;color:#b36c25}.mobile-menu{display:none}.view{display:none;animation:fade .25s ease}.view.active-view{display:block}@keyframes fade{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}.hero-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:30px}.hero-row h2{font:800 27px Manrope,sans-serif;margin:6px 0 6px;letter-spacing:-.7px}.hero-row h2 span{color:var(--purple)}.muted{color:var(--muted);margin:0;font-size:13px}.primary-button{border:0;border-radius:9px;background:var(--purple);color:white;padding:12px 16px;font:700 13px 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 5px 13px rgba(101,88,232,.18);transition:.2s}.primary-button:hover{background:var(--purple-dark);transform:translateY(-1px)}.primary-button span{font-size:18px;line-height:10px;vertical-align:-1px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stat-card,.panel{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}.stat-card{padding:18px 19px}.stat-card-top{display:flex;align-items:center;justify-content:space-between;color:#777b8d;font-size:12px;font-weight:600}.stat-icon{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;font-size:16px}.indigo{color:#5f53d6;background:#eeecff}.teal{color:#1a9a8e;background:#e6f8f5}.amber{color:#e79521;background:#fff4e2}.rose{color:#e96a7b;background:#ffedf0}.stat-card strong{display:block;font:800 26px Manrope,sans-serif;margin:17px 0 9px;letter-spacing:-1px}.trend{font-size:11px;font-weight:700;margin:0}.trend span{color:#a1a4b3;font-weight:500}.up{color:#20a77b}.down{color:#d96374}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr);gap:18px;margin-bottom:18px}.panel{padding:21px}.panel-header{display:flex;align-items:flex-start;justify-content:space-between}.panel-header h3{font:700 14px Manrope,sans-serif;margin:0 0 5px}.panel-header p{font-size:11px;color:#989bac;margin:0}.select-button{background:#fff;border:1px solid var(--line);border-radius:7px;color:#686c80;padding:7px 9px;font:600 11px 'DM Sans',sans-serif;cursor:pointer}.select-button span{margin-left:5px}.chart-wrap{height:266px;position:relative;margin-top:18px;padding-left:31px}.chart-y{position:absolute;left:0;height:215px;display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:#a3a6b6}.chart{position:relative;height:215px}.chart svg{height:215px;width:100%;position:absolute;z-index:2}.gridline{border-top:1px dashed #eeedf4;position:absolute;width:100%;left:0}.l1{top:0}.l2{top:33.3%}.l3{top:66.6%}.l4{bottom:0}.chart-x{display:flex;justify-content:space-between;color:#9d9fb0;font-size:10px;padding-top:11px}.chart-dot{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid white;background:#6659e8;right:17%;top:36px;z-index:3}.tooltip{position:absolute;right:12%;top:4px;z-index:4;background:#29283d;color:white;border-radius:6px;padding:7px 9px;box-shadow:0 4px 12px #2222;font-size:10px;display:grid}.tooltip:after{content:"";position:absolute;bottom:-4px;left:50%;width:7px;height:7px;background:#29283d;transform:rotate(45deg)}.tooltip b,.tooltip span{position:relative;z-index:1}.tooltip span{color:#c7c6d0;font-size:9px}.agent-summary-list{display:grid;gap:16px;margin:23px 0 18px}.agent-summary{display:flex;align-items:center;gap:10px}.agent-avatar{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:12px}.agent-avatar.purple{background:#eeecff;color:#5c50d6}.agent-avatar.orange{background:#fff0e2;color:#ca742b}.agent-avatar.blue{background:#e6f4ff;color:#3784c6}.agent-summary p{margin:0;font-size:12px;flex:1}.agent-summary p span{display:block;color:#9a9dae;font-size:10px;margin-top:2px}.live-tag{font-size:9px;font-weight:700;color:#2a9c79;background:#e7f8ef;padding:3px 6px;border-radius:4px}.outlined-button,.ghost-button{background:#fff;border:1px solid #dfdeea;border-radius:8px;color:#5b5f75;font:600 12px 'DM Sans',sans-serif;padding:10px 12px;cursor:pointer}.outlined-button{width:100%;transition:.2s}.outlined-button:hover{border-color:#aaa5eb;color:var(--purple);background:#fafaff}.text-button,.link-button{border:0;background:transparent;color:#5b50d1;font:700 11px 'DM Sans',sans-serif;cursor:pointer;padding:0}.lower-grid{grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr)}.activity-list{display:grid;gap:18px;margin-top:23px}.activity{display:flex;align-items:center;gap:11px}.activity-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;font-weight:700}.purple{background:#eeeaff;color:#6758df}.green{background:#e7f8ef;color:#24a37a}.blue{background:#e8f4fe;color:#2d88cb}.activity p{margin:0;font-size:11px}.activity p span{display:block;color:#9b9eae;font-size:10px;margin-top:3px}.alert-panel{display:flex;align-items:flex-start;gap:14px;background:linear-gradient(120deg,#f5f3ff,#fdfcff);border-color:#e9e6ff}.alert-symbol,.modal-icon{background:#e7e4ff;color:#5c4ddb;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;font-size:18px;flex:none}.alert-panel h3{font:700 13px Manrope,sans-serif;margin:1px 0 7px}.alert-panel p{color:#85889b;line-height:1.5;font-size:11px;margin:0 0 10px}.link-button span{font-size:15px}.compact{align-items:center}.filters{display:flex;gap:9px;align-items:center;margin-bottom:23px}.search{height:37px;border:1px solid var(--line);background:#fff;border-radius:8px;display:flex;align-items:center;padding:0 10px;gap:7px;min-width:235px;color:#9c9eae}.search span{font-size:17px}.search input{border:0;outline:none;width:100%;font:12px 'DM Sans',sans-serif;color:var(--ink);background:transparent}.filter-chip{border:1px solid var(--line);background:#fff;color:#74788b;border-radius:18px;padding:8px 12px;font:600 11px 'DM Sans',sans-serif;cursor:pointer}.filter-chip.active{color:#5d50d5;border-color:#dcd8ff;background:#f3f2ff}.filter-chip b{font-size:9px;padding-left:3px}.agent-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:17px}.agent-card{padding:20px;position:relative;min-height:210px}.agent-card .card-menu{position:absolute;right:16px;top:17px}.agent-card-top{display:flex;gap:11px;align-items:center}.agent-card-top h3{font:700 14px Manrope,sans-serif;margin:0 0 3px}.agent-card-top p{color:#9396a6;font-size:11px;margin:0}.agent-card .description{font-size:11px;line-height:1.55;color:#797d90;margin:19px 0 15px;min-height:35px}.agent-card-footer{border-top:1px solid var(--line);padding-top:13px;display:flex;justify-content:space-between;align-items:center;color:#979aaa;font-size:10px}.agent-card-footer button{color:#5d50d5;background:transparent;border:0;font:700 11px 'DM Sans',sans-serif;cursor:pointer}.inbox-view{margin:-36px -42px -45px}.inbox-layout{display:grid;grid-template-columns:307px minmax(400px,1fr) 260px;height:calc(100vh - 94px);min-height:640px;background:#fff;border-top:0}.conversation-list{border-right:1px solid var(--line);padding:25px 13px}.inbox-list-header{display:flex;justify-content:space-between;align-items:center;padding:0 8px 18px}.inbox-list-header h2{font:800 19px Manrope,sans-serif;margin:0}.inbox-list-header p{margin:3px 0 0;font-size:11px;color:#9699aa}.conversation-list .search{min-width:0;margin-bottom:16px}.conversation-tabs{display:flex;border-bottom:1px solid var(--line);gap:13px;padding:0 8px}.conversation-tabs button{border:0;background:transparent;padding:0 0 10px;color:#9295a6;font:600 11px 'DM Sans';cursor:pointer}.conversation-tabs button.active{color:#5e51d6;border-bottom:2px solid var(--purple)}.conversation{display:flex;gap:10px;padding:14px 8px;border-radius:9px;cursor:pointer;margin-top:4px}.conversation:hover,.conversation.active{background:#f5f4ff}.customer-avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:11px;font-weight:700}.customer-avatar.green{background:#dbf6e9;color:#278a68}.customer-avatar.pink{background:#ffe6ed;color:#c15e76}.customer-avatar.blue{background:#e4f3ff;color:#4287ba}.conversation-info{min-width:0;flex:1}.conversation-info h4{margin:0;font:700 12px Manrope,sans-serif}.conversation-info p{margin:3px 0 0;color:#86899b;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation-meta{text-align:right;font-size:9px;color:#9ea1b0}.conversation-meta b{display:block;background:#6558e8;color:white;width:15px;height:15px;line-height:15px;text-align:center;border-radius:50%;font-size:8px;margin:5px 0 0 auto}.chat-panel{display:flex;flex-direction:column;min-width:0}.chat-header{height:78px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 23px;gap:10px}.chat-header h3{margin:0;font:700 13px Manrope,sans-serif}.chat-header p{margin:3px 0 0;font-size:10px;color:#9194a5}.online-dot{display:inline-block;background:#33bd87;width:6px;height:6px;border-radius:50%;margin-right:3px}.messages{padding:24px 30px;overflow:auto;display:flex;flex:1;flex-direction:column;gap:16px;background:#fcfcfe}.message{display:flex;gap:8px;max-width:78%}.message.outgoing{align-self:flex-end;flex-direction:row-reverse}.message .bubble{border-radius:12px 12px 12px 3px;background:#fff;border:1px solid var(--line);padding:9px 11px;color:#515568;font-size:12px;line-height:1.45;box-shadow:0 2px 6px #17142505}.message.outgoing .bubble{border:0;background:#6659e8;color:#fff;border-radius:12px 12px 3px 12px}.message-time{font-size:9px;color:#a5a7b5;margin-top:3px}.message.outgoing .message-time{text-align:right}.message-avatar{width:24px;height:24px;border-radius:50%;font-size:8px}.system-note{text-align:center;color:#a0a2b0;font-size:10px;margin:5px 0}.suggestions{display:flex;gap:7px;padding:8px 20px;border-top:1px solid var(--line);overflow:auto}.suggestions button{white-space:nowrap;border:1px solid #dfddf1;background:#fff;color:#6256d2;border-radius:14px;font:600 10px 'DM Sans';padding:5px 8px;cursor:pointer}.message-form{border-top:1px solid var(--line);height:66px;padding:12px 20px;display:flex;gap:10px}.message-form input{border:0;outline:0;flex:1;font:12px 'DM Sans';color:var(--ink)}.attach{border:0;background:transparent;font-size:19px;color:#898da0;cursor:pointer}.send-button{background:var(--purple);color:#fff;border:0;width:32px;height:32px;border-radius:8px;font-size:16px;cursor:pointer}.contact-panel{border-left:1px solid var(--line);padding:25px 20px}.contact-profile{text-align:center;border-bottom:1px solid var(--line);padding-bottom:21px}.customer-avatar.large{width:49px;height:49px;font-size:14px;margin:0 auto 9px}.contact-profile h3{font:700 14px Manrope;margin:0}.contact-profile p{font-size:10px;color:#9295a4;margin:4px 0 10px}.status-pill{font-size:9px;font-weight:700;padding:4px 7px;color:#25875f;background:#e6f8ef;border-radius:4px}.contact-details{padding:18px 0;border-bottom:1px solid var(--line)}.contact-details h4{font:700 11px Manrope;margin:0 0 12px}.contact-details p{font-size:11px;color:#777b8e;line-height:1.55;margin:0}dl{margin:0;display:grid;gap:10px}dl div{display:flex;justify-content:space-between;gap:7px;font-size:10px}dt{color:#9699a8}dd{margin:0;font-weight:600;color:#5f6376;text-align:right}.knowledge-callout{background:#f2f1ff;border:1px solid #e3e0ff;border-radius:11px;padding:16px 18px;display:flex;align-items:center;gap:11px;margin-bottom:20px}.knowledge-callout span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:#6054d8;background:#e4e1ff}.knowledge-callout b{font:700 12px Manrope}.knowledge-callout p{margin:2px 0 0;color:#777a91;font-size:11px}.knowledge-callout button{margin-left:auto;border:0;background:transparent;color:#5c50d5;font:700 11px 'DM Sans';cursor:pointer}.knowledge-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:16px}.knowledge-card{padding:18px}.knowledge-type{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;margin-bottom:15px;font-size:17px}.knowledge-card h3{font:700 13px Manrope;margin:0 0 4px}.knowledge-card p{color:#9295a4;font-size:10px;margin:0}.knowledge-card-footer{border-top:1px solid var(--line);padding-top:12px;margin-top:15px;display:flex;justify-content:space-between;font-size:10px;color:#9699a8}.knowledge-card-footer b{color:#289b70;font-size:9px}.automation-list{display:grid;gap:12px;max-width:850px}.automation{padding:17px 18px;display:flex;align-items:center;gap:14px}.automation-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#efedff;color:#6255db;font-size:18px}.automation h3{margin:0 0 4px;font:700 13px Manrope}.automation p{margin:0;color:#858899;font-size:11px}.automation > div:nth-child(2){flex:1}.switch{width:34px;height:20px;border:0;border-radius:12px;background:#d9dbe3;position:relative;cursor:pointer;transition:.2s}.switch:after{content:"";position:absolute;background:#fff;width:16px;height:16px;border-radius:50%;top:2px;left:2px;box-shadow:0 1px 3px #0003;transition:.2s}.switch.on{background:#685be7}.switch.on:after{left:16px}.analytics-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}.analytics-kpis .panel{padding:20px}.analytics-kpis span{color:#85889a;font-size:12px}.analytics-kpis strong{font:800 27px Manrope;display:block;margin:16px 0 9px}.analytics-kpis small{font-size:12px;color:#9ea0af}.empty-chart{text-align:center;padding:70px 15px}.empty-icon{width:42px;height:42px;background:#eeecff;border-radius:12px;color:#6256d7;display:grid;place-items:center;font-size:23px;margin:0 auto 13px}.empty-chart h3{font:700 14px Manrope;margin:0 0 7px}.empty-chart p{margin:0;color:#898c9d;font-size:12px}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.setting-card{display:flex;gap:14px;align-items:flex-start;min-height:180px}.setting-icon{display:grid;place-items:center;background:#eeecff;color:#5e52d5;width:37px;height:37px;border-radius:10px;font-size:18px}.setting-card h3{font:700 13px Manrope;margin:1px 0 7px}.setting-card p{font-size:11px;line-height:1.45;color:#858899;margin:0 0 17px}.modal{border:0;background:transparent;padding:0;max-width:420px;width:calc(100% - 30px)}.modal::backdrop{background:rgba(27,26,49,.4);backdrop-filter:blur(3px)}.modal-card{background:#fff;padding:30px;border-radius:17px;box-shadow:0 20px 80px #17142d45;position:relative}.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;color:#85889b;font-size:24px;cursor:pointer}.modal-card h2{font:800 22px Manrope;margin:11px 0 6px}.modal-card label{display:grid;gap:6px;font-size:11px;font-weight:700;color:#5f6375;margin-top:18px}.modal-card input,.modal-card select,.modal-card textarea{border:1px solid #e1e1eb;border-radius:8px;padding:10px;outline:0;color:var(--ink);font:12px 'DM Sans';resize:vertical}.modal-card input:focus,.modal-card select:focus,.modal-card textarea:focus{border-color:#9c94ef;box-shadow:0 0 0 3px #eeedff}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:23px}.ghost-button{border-color:transparent}.teal-bg{color:#15978c;background:#e4f8f5}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);background:#28263c;color:white;padding:11px 14px;border-radius:8px;font-size:12px;box-shadow:0 10px 25px #1114;transition:.3s;z-index:30}.toast.show{transform:translate(-50%,0)}
@media(max-width:1100px){.stat-grid{grid-template-columns:repeat(2,1fr)}.agent-grid,.knowledge-grid{grid-template-columns:repeat(2,1fr)}.contact-panel{display:none}.inbox-layout{grid-template-columns:307px minmax(400px,1fr)}.settings-grid{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.agents-card .outlined-button{max-width:260px}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}.main-content{margin-left:0;width:100%;padding:0 18px 30px}.topbar{height:77px;margin-bottom:28px}.mobile-menu{display:block;border:0;background:transparent;font-size:19px}.breadcrumb{gap:8px}.breadcrumb span{display:none}.hero-row{align-items:flex-start;gap:13px}.hero-row h2{font-size:23px}.hero-row .primary-button{white-space:nowrap}.stat-grid,.analytics-kpis{grid-template-columns:1fr 1fr}.stat-card{padding:15px}.stat-card strong{font-size:22px}.dashboard-grid{display:block}.dashboard-grid .panel{margin-bottom:15px}.inbox-view{margin:-28px -18px -30px}.inbox-layout{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 77px)}.conversation-list{display:none}.contact-panel{display:none}.chat-panel{min-height:calc(100vh - 77px)}.chart-wrap{padding-left:24px}.knowledge-callout button{display:none}.knowledge-grid,.agent-grid{grid-template-columns:1fr}.filters{flex-wrap:wrap}.search{flex:1;min-width:190px}.top-actions .help-button{display:none}}