.demo-wrap{max-width:1500px;margin:2rem auto 5rem;padding:0 1.25rem;color:#e5e7eb;font-family:Inter,sans-serif}.demo-wrap *{box-sizing:border-box}.demo-banner{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;background:#123529;border:1px solid #277456;border-radius:12px 12px 0 0;padding:.75rem 1.25rem;color:#a8f5cf;font-size:.77rem;font-weight:700;letter-spacing:.04em}.demo-shell{display:grid;grid-template-columns:240px minmax(0,1fr);background:#0b1020;border:1px solid #242b3d;border-top:0;border-radius:0 0 16px 16px;min-height:760px;overflow:hidden}.demo-side{background:#0e1424;border-right:1px solid #242b3d;padding:1.5rem 1rem;display:flex;flex-direction:column}.demo-brand{display:flex;align-items:center;gap:.75rem;padding:.25rem .65rem;font-size:1.4rem;font-weight:800;color:#fff}.demo-brand-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#4f46e5;font-size:1.35rem}.demo-brand small{display:block;font-size:.62rem;color:#8f9bb4;letter-spacing:.12em;margin-top:.15rem}.demo-side nav{display:grid;gap:.4rem;margin-top:3rem}.demo-nav-label{padding:0 .75rem .65rem;color:#76839e;font-size:.68rem;font-weight:700;letter-spacing:.13em}.demo-nav{width:100%;text-align:left;padding:.85rem .9rem;border:1px solid transparent;border-radius:9px;color:#aeb8ce;background:transparent;cursor:pointer}.demo-nav i{width:1.7rem}.demo-nav:hover,.demo-nav.active{background:#25254c;color:#dad7ff;border-color:#444080}.demo-side-foot{margin-top:auto;padding:.8rem;color:#78daa7;font-size:.76rem;line-height:2}.demo-side-foot a{color:#b8b5ff}.demo-main{min-width:0;padding:clamp(1rem,3vw,2rem);background:#0b1020}.demo-header{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding-bottom:1.5rem;margin-bottom:1rem}.demo-header h1{font-size:clamp(1.6rem,3vw,2.1rem);color:#fff;font-weight:750;margin:.35rem 0}.demo-header p,.demo-view>p,.demo-panel-title p{color:#949eb3;font-size:.85rem}.demo-kicker,.demo-card>span{font-size:.68rem;letter-spacing:.1em;color:#a3a5fc;font-weight:700}.demo-chip,.demo-live{display:inline-flex;align-items:center;gap:.5rem;border:1px solid #27624a;background:#123326;color:#8ff0b9;padding:.5rem .8rem;border-radius:9px;white-space:nowrap;font-size:.75rem}.demo-status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 8px #34d399}.demo-notice{color:#a9b4cd;font-size:.78rem;min-height:1.4rem;margin-bottom:1rem}.demo-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:2rem}.demo-card{background:#151c2d;border:1px solid #2c3549;border-radius:12px;padding:1.25rem;min-width:0}.demo-stats .demo-card{min-height:125px}.demo-card>span{display:block;color:#aeb9d2}.demo-card>span i{color:#8b83ff;margin-right:.35rem}.demo-card strong{display:block;font-size:1.8rem;color:#fff;margin:.7rem 0 .2rem}.demo-card strong.demo-online{font-size:1.45rem;color:#66d9a0}.demo-card small,.demo-conversation small{color:#939fb7;font-size:.76rem}.demo-card h2,.demo-panel-title h2,.demo-view>h2{font-size:1.08rem;color:#f7f8ff;font-weight:700;margin:0 0 1rem}.demo-panel-title{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.demo-panel-title h2{font-size:1.25rem;margin:0 0 .3rem}.demo-chat-grid{display:grid;grid-template-columns:minmax(210px,34%) minmax(0,1fr);gap:1rem}.demo-lead-panel,.demo-conversation{min-height:440px}.demo-wrap label{display:block;color:#aab6ca;font-size:.75rem;margin:.75rem 0 .4rem}.demo-wrap input,.demo-wrap select{background:#0c1323;border:1px solid #39465d;border-radius:8px;color:#f3f7ff;padding:.7rem .8rem;max-width:100%;outline:none}.demo-wrap input:focus,.demo-wrap select:focus{border-color:#8b83ff;box-shadow:0 0 0 2px #8b83ff33}.demo-lead-panel input{width:100%}.demo-leads{display:grid;gap:.4rem;margin-top:1rem}.demo-lead{width:100%;text-align:left;background:transparent;color:#e4e9f5;border:1px solid transparent;border-radius:8px;padding:.85rem;cursor:pointer}.demo-lead small{display:block;margin-top:.3rem}.demo-lead:hover,.demo-lead.active{background:#252b48;border-color:#464a86}.demo-conversation{display:flex;flex-direction:column}.demo-conversation-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid #30394b;padding-bottom:.8rem}.demo-conversation-head h2{margin-bottom:.2rem}.demo-conversation-head label{margin:0 0 .3rem}.demo-messages{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:1.25rem .2rem;min-height:180px;max-height:340px;overflow:auto}.demo-bubble{align-self:flex-start;background:#273047;color:#eef1fb;border-radius:12px 12px 12px 3px;padding:.75rem 1rem;max-width:80%;font-size:.83rem;line-height:1.5}.demo-bubble.sent{align-self:flex-end;background:#37348a;border-radius:12px 12px 3px 12px}.demo-compose{display:flex;gap:.5rem}.demo-compose input{flex:1;min-width:0}.demo-wrap button[type=submit],#demo-save{background:#4f46e5;color:#fff;border:0;border-radius:8px;padding:.7rem 1rem;cursor:pointer}.demo-wrap button[type=submit]:hover,#demo-save:hover{background:#6366f1}.demo-view[hidden]{display:none}.demo-view>p{margin-bottom:1.25rem}.demo-view>.demo-card{margin-top:1rem}.demo-view>.demo-card input{display:block;width:100%;margin-bottom:1rem}.demo-hint{font-size:.78rem;color:#9eaac1;margin-top:1rem}.demo-bars{display:flex;align-items:end;justify-content:space-around;gap:.7rem;height:170px;padding-top:1rem;color:#bac5e0;font-size:.7rem}.demo-bars div{height:var(--height);background:linear-gradient(#7773ef,#46408b);border-radius:6px 6px 0 0;flex:1;text-align:center;padding-top:.3rem}@media(max-width:1000px){.demo-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.demo-shell{display:block}.demo-side{border-right:0;border-bottom:1px solid #242b3d}.demo-side nav{margin-top:1rem}.demo-side-foot{margin-top:1rem}.demo-chat-grid{grid-template-columns:1fr}.demo-lead-panel,.demo-conversation{min-height:0}.demo-header{align-items:flex-start;flex-direction:column}.demo-panel-title{align-items:flex-start;flex-direction:column}}@media(max-width:440px){.demo-stats{grid-template-columns:1fr}.demo-conversation-head{align-items:flex-start;flex-direction:column}.demo-compose{flex-direction:column}}
.demo-wrap{max-width:1440px;margin:3rem auto 5rem;padding:0 1.25rem;color:#e9f1fc}.demo-banner{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;background:#123529;border:1px solid #277456;border-radius:12px 12px 0 0;padding:.75rem 1.25rem;color:#a8f5cf;font-size:.77rem;font-weight:700;letter-spacing:.04em}.demo-shell{display:grid;grid-template-columns:230px minmax(0,1fr);background:#0c1422;border:1px solid #263a54;border-top:0;border-radius:0 0 16px 16px;min-height:680px;overflow:hidden}.demo-side{background:#101b2c;border-right:1px solid #263a54;padding:1.5rem;display:flex;flex-direction:column}.demo-brand{font-size:1.35rem;font-weight:800;color:#fff}.demo-brand small{display:block;font-size:.64rem;color:#83acc8;letter-spacing:.15em;margin-top:.3rem}.demo-side nav{display:grid;gap:.5rem;margin-top:3rem}.demo-nav{width:100%;text-align:left;padding:.8rem;border:1px solid transparent;border-radius:9px;color:#b4c8df;background:transparent}.demo-nav:hover,.demo-nav.active{background:#1c324d;color:white;border-color:#3b668c}.demo-side-foot{margin-top:auto;color:#88ddaf;font-size:.76rem;line-height:2}.demo-side-foot a{color:#9ad5ff}.demo-main{min-width:0;padding:clamp(1rem,3vw,2rem)}.demo-header{display:flex;justify-content:space-between;gap:1rem;align-items:center;border-bottom:1px solid #29384e;padding-bottom:1.3rem;margin-bottom:1.3rem}.demo-header h1{font-size:clamp(1.6rem,3vw,2.3rem);color:#fff;font-weight:750;margin:.3rem 0}.demo-header p,.demo-view>p{color:#9fb3ca;font-size:.88rem}.demo-kicker,.demo-card>span{font-size:.68rem;letter-spacing:.14em;color:#76cce7;font-weight:700}.demo-chip{border:1px solid #35836a;color:#9cf0c8;padding:.5rem .8rem;border-radius:99px;white-space:nowrap;font-size:.75rem}.demo-notice{color:#a5d5ef;font-size:.8rem;min-height:1.4rem;margin-bottom:1rem}.demo-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.demo-card{background:#142237;border:1px solid #2c425e;border-radius:12px;padding:1.25rem;min-width:0}.demo-card strong{display:block;font-size:2rem;color:white;margin:.35rem 0}.demo-card small,.demo-hint{color:#a4b7cc;font-size:.78rem}.demo-card h2,.demo-view h2{font-size:1.05rem;color:#fff;font-weight:700;margin:0 0 1rem}.demo-chat-grid{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:1rem}.demo-wrap label{display:block;font-size:.76rem;color:#bdcfe0;margin:.75rem 0 .4rem}.demo-wrap input,.demo-wrap select{background:#0c192a;color:white;border:1px solid #385475;border-radius:8px;padding:.75rem;width:100%;min-width:0}.demo-wrap button{cursor:pointer}.demo-wrap button:focus-visible,.demo-wrap input:focus-visible,.demo-wrap select:focus-visible,.demo-wrap a:focus-visible{outline:2px solid #87d9fa;outline-offset:2px}.demo-leads{display:grid;gap:.5rem;margin-top:1rem}.demo-lead{padding:.8rem;background:#192a40;color:#e6f1fc;border:1px solid #314b66;border-radius:8px;text-align:left}.demo-lead.active,.demo-lead:hover{border-color:#6ed3ed;background:#23415e}.demo-lead small{display:block;color:#a6bcd1}.demo-conversation{display:flex;flex-direction:column;min-height:390px}.demo-conversation-head{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #31415a;padding-bottom:.7rem}.demo-conversation-head select{width:auto}.demo-messages{flex:1;display:flex;flex-direction:column;gap:.6rem;padding:1rem 0;min-height:160px}.demo-bubble{background:#24364d;max-width:85%;padding:.7rem 1rem;border-radius:12px;font-size:.86rem;align-self:flex-start}.demo-bubble.sent{background:#264b72;align-self:flex-end}.demo-compose{display:flex;gap:.5rem}.demo-compose button,#demo-save{background:#346edd;color:white;border:0;border-radius:8px;padding:.7rem 1rem;white-space:nowrap}.demo-view[hidden]{display:none}.demo-bars{display:flex;align-items:end;gap:1rem;height:190px;padding-top:1rem}.demo-bars div{flex:1;height:var(--height);background:linear-gradient(#5dc8ed,#245cad);border-radius:7px 7px 0 0;text-align:center;padding-top:.3rem;font-size:.7rem;color:#fff}.demo-hint{margin-top:1rem}@media(max-width:850px){.demo-shell{grid-template-columns:1fr}.demo-side{border-right:0;border-bottom:1px solid #263a54}.demo-side nav{display:flex;flex-wrap:wrap;margin-top:1rem}.demo-nav{width:auto}.demo-side-foot{margin-top:1rem}.demo-chat-grid{grid-template-columns:1fr}}@media(max-width:540px){.demo-stats{grid-template-columns:1fr}.demo-header{align-items:flex-start;flex-direction:column}.demo-compose{flex-direction:column}.demo-conversation-head{flex-direction:column}.demo-bars{gap:.3rem}}