.demo{--demo-h:600px;gap:18px;display:grid;position:relative}.demo__chips{flex-wrap:wrap;gap:8px;display:flex}@media (width<=899px){.demo__chips{margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter);scrollbar-width:none;scroll-snap-type:x proximity;flex-wrap:nowrap;overflow-x:auto}.demo__chips::-webkit-scrollbar{display:none}.demo__chip{scroll-snap-align:start;flex:none}}.demo__chip{height:42px;box-shadow:inset 0 0 0 1px var(--line-dark);color:var(--muted);background:#ffffff0a;border:0;border-radius:999px;align-items:center;gap:9px;padding:0 16px 0 12px;font-size:14px;transition:background .25s,color .25s,box-shadow .25s;display:inline-flex}.demo__chip:hover{color:#fff;background:#ffffff12}.demo__chip.is-active{color:#fff;background:color-mix(in oklab, var(--c1) 16%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c1) 55%, transparent)}.demo__chip-dot{background:var(--c1);width:9px;height:9px;box-shadow:0 0 10px var(--c1);border-radius:50%}.demo__chip-name{color:#fff;font-weight:600}.demo__window{box-shadow:inset 0 0 0 1px var(--line-dark-strong), inset 0 1px 0 #ffffff12, 0 50px 120px -40px #000000e6, 0 0 120px -60px color-mix(in oklab, var(--c1) 70%, transparent);background:linear-gradient(#141d4ad1,#090e28eb);border-radius:24px;transition:box-shadow .6s;position:relative;overflow:hidden}.demo__bar{border-bottom:1px solid var(--line-dark);background:#ffffff05;align-items:center;gap:14px;height:46px;padding:0 14px 0 18px;display:flex}.demo__lights{gap:6px;display:flex}.demo__lights i{background:#ffffff24;border-radius:50%;width:10px;height:10px}.demo__context{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--muted);flex:1;font-size:12px;overflow:hidden}.demo__replay{height:30px;color:var(--muted);background:#ffffff0d;border:0;border-radius:999px;align-items:center;gap:6px;padding:0 12px;font-size:12.5px;transition:color .2s,background .2s;display:inline-flex}.demo__replay:hover{color:#fff;background:#ffffff1a}@media (width<=520px){.demo__replay span{display:none}}.demo__body{grid-template-columns:1fr;display:grid}@media (width>=900px){.demo__body{height:var(--demo-h);grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}.demo__convo{flex-direction:column;height:520px;min-height:0;display:flex}@media (width>=900px){.demo__convo{border-right:1px solid var(--line-dark);height:auto}}.demo__head{border-bottom:1px solid var(--line-dark);align-items:center;gap:12px;padding:16px 20px;display:flex}.demo__avatar{background:radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--a2,var(--c2)) 85%, white), transparent 40%), radial-gradient(circle, var(--a1,var(--c1)), color-mix(in oklab, var(--a1,var(--c1)) 40%, #0a1030) 75%);width:38px;height:38px;box-shadow:0 0 20px color-mix(in oklab, var(--a1,var(--c1)) 60%, transparent);border-radius:50%;flex:none;position:relative}.demo__avatar:after{content:"";background:#3dffa8;border-radius:50%;width:11px;height:11px;position:absolute;bottom:-1px;right:-1px;box-shadow:0 0 0 2.5px #121a45}.demo__who{flex:1;min-width:0;line-height:1.2;display:grid}.demo__who strong{font-family:var(--font-display);font-size:17px;font-weight:600}.demo__who small{color:var(--muted);font-size:12.5px}.demo__wave,.demo__timer{display:none}[data-skin=voice] .demo__wave,[data-skin=copilot] .demo__wave,[data-skin=voice] .demo__timer,[data-skin=copilot] .demo__timer{display:flex}.demo__wave{align-items:center;gap:3px;height:26px}.demo__wave i{background:var(--c1);border-radius:3px;width:3px;height:100%;transition:transform .2s;transform:scaleY(.12)}.demo__convo.is-speaking .demo__wave i{animation:.9s ease-in-out infinite dwave;animation-delay:calc(var(--i) * -.09s)}.demo__convo.is-speaking.is-customer .demo__wave i{background:#c9d4ff}@keyframes dwave{0%,to{transform:scaleY(.18)}50%{transform:scaleY(1)}}.demo__timer{color:var(--muted);background:#ffffff0d;border-radius:7px;padding:4px 9px;font-size:12.5px}.demo__stream{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#adbeff33 transparent;flex-direction:column;flex:1;gap:12px;min-height:0;padding:20px;display:flex;overflow-y:auto;mask-image:linear-gradient(#0000 0,#000 24px)}.dm{max-width:86%;animation:dmIn .55s var(--ease-out) both}@keyframes dmIn{0%{opacity:0;transform:translateY(10px)scale(.98)}}.dm__bubble{border-radius:18px;padding:11px 15px;font-size:15px;line-height:1.5}.dm--out{align-self:flex-start}.dm--out .dm__bubble{box-shadow:inset 0 0 0 1px var(--line-dark);background:#ffffff12;border-bottom-left-radius:6px}.dm--in{align-self:flex-end}.dm--in .dm__bubble{background:linear-gradient(135deg, var(--blue), #2a4be0);color:#fff;border-bottom-right-radius:6px}.dm--agent{align-self:flex-start}.dm--agent .dm__bubble{background:#3dffa814;border-bottom-left-radius:6px;box-shadow:inset 0 0 0 1px #3dffa840}.dm__who{font-size:11.5px;font-family:var(--font-mono);letter-spacing:.04em;color:var(--muted-2);margin:0 4px 5px;display:block}.dm--in .dm__who{text-align:right}[data-skin=voice] .dm,[data-skin=copilot] .dm{grid-template-columns:74px 1fr;align-self:stretch;gap:12px;max-width:100%;display:grid}[data-skin=voice] .dm__who,[data-skin=copilot] .dm__who{text-align:left;color:var(--muted);margin:3px 0 0}[data-skin=voice] .dm--out .dm__who,[data-skin=copilot] .dm--out .dm__who,[data-skin=copilot] .dm--agent .dm__who{color:var(--c1)}[data-skin=voice] .dm__bubble,[data-skin=copilot] .dm__bubble{box-shadow:none;color:#e6ebff;background:0 0;padding:0;font-size:15.5px}[data-skin=voice] .dm--in .dm__bubble,[data-skin=copilot] .dm--in .dm__bubble{color:#b9c3ea}.dm-typing{animation:dmIn .3s var(--ease-out) both;background:#ffffff0f;border-radius:18px 18px 18px 6px;align-self:flex-start;gap:4px;padding:13px 15px;display:inline-flex}.dm-typing--in{background:#3060ff59;border-radius:18px 18px 6px;align-self:flex-end}.dm-typing i{opacity:.6;background:currentColor;border-radius:50%;width:7px;height:7px;animation:1.2s ease-in-out infinite dmTyping}@keyframes dmTyping{0%,60%,to{opacity:.5;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.dm-typing i:nth-child(2){animation-delay:.15s}.dm-typing i:nth-child(3){animation-delay:.3s}[data-skin=voice] .dm-typing,[data-skin=copilot] .dm-typing{display:none}.dm-photo{width:210px;box-shadow:inset 0 0 0 1px var(--line-dark-strong);animation:dmIn .55s var(--ease-out) both;background:#1a2350;border-radius:18px 18px 6px;align-self:flex-end;overflow:hidden}.dm-photo__img{background:radial-gradient(circle at 30% 20%,#ffffff40,#0000 50%),linear-gradient(160deg,#cfd5de,#8a93a3);place-items:center;height:130px;display:grid;position:relative}.dm-photo__meter{font-family:var(--font-mono);letter-spacing:.12em;color:#b6ff9e;text-shadow:0 0 8px #b6ff9e99;background:#1d2a1d;border-radius:6px;padding:8px 10px;font-size:24px;box-shadow:inset 0 0 0 3px #11180f,0 6px 14px #00000059}.dm-photo__scan{opacity:0;background:linear-gradient(#0000,#2ee6f680 50%,#0000);height:30%;animation:1.4s ease-in-out 2 scan;position:absolute;inset:0}@keyframes scan{0%{opacity:1;transform:translateY(-100%)}to{opacity:1;transform:translateY(330%)}}.dm-photo__cap{font-size:12px;font-family:var(--font-mono);color:var(--muted);padding:8px 12px}.dm-mail{color:var(--text-dark);animation:dmIn .6s var(--ease-out) both;background:#f6f7fb;border-radius:16px;align-self:stretch;overflow:hidden;box-shadow:0 20px 40px -20px #0009}.dm-mail__head{border-bottom:1px solid #0b123314;grid-template-columns:auto 1fr auto;align-items:center;gap:2px 12px;padding:14px 16px;display:grid}.dm-mail__ava{color:#fff;background:linear-gradient(135deg,#7b8bb8,#4a5683);border-radius:50%;grid-row:span 2;place-items:center;width:36px;height:36px;font-size:14px;font-weight:700;display:grid}.dm-mail__from{font-size:14.5px;font-weight:600}.dm-mail__from small{color:var(--muted-dark);font-weight:400}.dm-mail__time{color:var(--muted-dark);font-size:12px}.dm-mail__subj{color:var(--muted-dark);grid-column:2/4;font-size:13.5px}.dm-mail__body{padding:14px 16px 16px;font-size:14.5px;line-height:1.55}.dm-mail--reply{background:color-mix(in oklab, var(--c1) 10%, #0e163d);color:#e6ebff;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c1) 45%, transparent)}.dm-mail--reply .dm-mail__label{font-size:12px;font-family:var(--font-mono);letter-spacing:.04em;color:var(--c2);border-bottom:1px solid color-mix(in oklab, var(--c1) 25%, transparent);align-items:center;gap:8px;padding:11px 16px;display:flex}.dm-mail--reply .dm-mail__body{color:#dfe5ff}.dm-tags{animation:dmIn .5s var(--ease-out) both;flex-wrap:wrap;gap:6px;display:flex}.dm-tags span{color:var(--c2);background:color-mix(in oklab, var(--c1) 14%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c1) 40%, transparent);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:500}.dm-handoff{color:#a6ffd4;animation:dmIn .5s var(--ease-out) both;background:#3dffa812;border-radius:12px;align-self:stretch;align-items:center;gap:10px;padding:10px 14px;font-size:13.5px;display:flex;box-shadow:inset 0 0 0 1px #3dffa838}.dm-handoff--switch{color:#ffe2cf;background:linear-gradient(90deg, color-mix(in oklab, var(--c1) 16%, transparent), #3dffa81a);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c1) 40%, transparent)}.demo__side.is-switching{animation:sideSwitch 1.2s var(--ease-out)}@keyframes sideSwitch{30%{background:#3dffa814}}.dm-handoff svg{flex:none}.dm-done{color:var(--ink-950);background:linear-gradient(120deg, var(--c2), var(--c1));box-shadow:0 10px 30px -8px color-mix(in oklab, var(--c1) 80%, transparent);text-align:center;border-radius:999px;align-self:center;align-items:center;gap:10px;margin-top:6px;padding:10px 16px;font-size:13.5px;font-weight:600;animation:.7s cubic-bezier(.34,1.56,.64,1) both donePop;display:inline-flex}@keyframes donePop{0%{opacity:0;transform:scale(.7)}}.dm-chart{box-shadow:inset 0 0 0 1px var(--line-dark);animation:dmIn .55s var(--ease-out) both;background:#ffffff0a;border-radius:16px;align-self:stretch;padding:16px}.dm-chart__title{margin-bottom:12px;font-size:13px;font-weight:600}.dm-chart__row{grid-template-columns:minmax(110px,.9fr) 1.4fr auto;align-items:center;gap:10px;padding:5px 0;font-size:12.5px;display:grid}.dm-chart__label{color:var(--muted)}.dm-chart__track{height:14px;position:relative}.dm-chart__bar{transform-origin:0;animation:barGrow .9s var(--ease-out) both;animation-delay:calc(var(--i) * .18s);border-radius:4px;position:absolute;top:0;bottom:0}@keyframes barGrow{0%{transform:scaleX(0)}}.dm-chart__bar--base{background:#adbeff59}.dm-chart__bar--up{background:var(--orange)}.dm-chart__bar--down{opacity:.75;background:#3dffa8}.dm-chart__bar--total{background:linear-gradient(90deg, var(--c1), var(--c2))}.dm-chart__value{font-family:var(--font-mono);text-align:right;min-width:72px;font-weight:600}.dm-chart__row--total{border-top:1px dashed var(--line-dark-strong);margin-top:4px;padding-top:9px}.dm-chart__row--total .dm-chart__label{color:#fff;font-weight:600}@media (width<=899px){.demo__side{display:none!important}.demo__convo{height:560px}}.log.log--inline{box-shadow:inset 0 0 0 1px var(--line-dark);background:#03050f59;border-radius:12px;grid-template-columns:26px 1fr;align-self:stretch;gap:10px;padding:9px 12px}.log.log--inline:before{display:none}.log--inline .log__icon{border-radius:8px;width:26px;height:26px}.log--inline .log__text{padding-top:3px;font-size:13px}.log--inline .log__detail{font-size:11px}.log.log--inline.log--whisper{box-shadow:none;background:0 0;padding:0}.demo__side{border-top:1px solid var(--line-dark);background:#03050f40;flex-direction:column;min-height:0;display:flex}@media (width>=900px){.demo__side{border-top:0}}.demo__side-head{border-bottom:1px solid var(--line-dark);height:71px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:none;align-items:center;gap:10px;padding:0 20px;font-size:12px;display:flex}.demo__log{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#adbeff33 transparent;flex-direction:column;flex:1;gap:4px;min-height:220px;max-height:360px;margin:0;padding:18px 20px 24px;list-style:none;display:flex;overflow-y:auto}@media (width>=900px){.demo__log{max-height:none}}.log{animation:logIn .5s var(--ease-out) both;grid-template-columns:30px 1fr;gap:12px;padding-bottom:12px;display:grid;position:relative}@keyframes logIn{0%{opacity:0;transform:translate(12px)}}.log:before{content:"";background:var(--line-dark-strong);width:1px;position:absolute;top:32px;bottom:0;left:14.5px}.log:last-child:before{display:none}.log__icon{width:30px;height:30px;color:var(--c2);background:color-mix(in oklab, var(--c1) 14%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c1) 35%, transparent);border-radius:9px;place-items:center;display:grid}.log__icon svg{width:15px;height:15px}.log__text{color:#eef1ff;padding-top:5px;font-size:14px;font-weight:500;line-height:1.35}.log__detail{font-family:var(--font-mono);color:var(--muted);margin-top:3px;font-size:11.5px;line-height:1.5}.log--running .log__icon{animation:1s ease-in-out infinite pulseIcon}@keyframes pulseIcon{50%{box-shadow:inset 0 0 0 1px var(--c1), 0 0 14px color-mix(in oklab, var(--c1) 60%, transparent)}}.log--whisper .log__card{box-shadow:inset 0 0 0 1px var(--line-dark);background:#ffffff0d;border-radius:12px;padding:11px 13px}.log--whisper .log__kind{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c2);margin-bottom:4px;font-size:10.5px}.log--whisper .log__card p{color:#dfe5ff;font-size:13.5px;line-height:1.45}.log--answer .log__card{background:color-mix(in oklab, var(--c1) 12%, transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--c1) 45%, transparent)}.log--approve .log__icon{color:#3dffa8;background:#3dffa81f;box-shadow:inset 0 0 0 1px #3dffa859}.log__approve{color:var(--ink-950);background:#fff;border-radius:999px;align-items:center;gap:8px;margin-top:8px;padding:7px 14px;font-size:12.5px;font-weight:600;transition:transform .2s,background .3s;display:inline-flex}.log__approve.is-pressed{transform:scale(.94)}.log__approve.is-done{background:#3dffa8}.demo__progress{background:#ffffff0a;height:2px}.demo__progress span{background:linear-gradient(90deg, var(--c1), var(--c2));width:0;height:100%;transition:width .6s var(--ease-out);display:block}