.chat-demo{--cd-user-bg:var(--color-accent-fill);--cd-user-fg:var(--color-on-accent);width:100%;min-width:0;font-family:var(--font-body)}.cd-sr{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.cd-tabs{scrollbar-width:none;gap:.35rem;margin-bottom:.85rem;display:flex;overflow-x:auto}.cd-tabs::-webkit-scrollbar{display:none}.cd-tab{font:500 .82rem var(--font-display);color:var(--color-text-secondary);border:1px solid var(--color-border);cursor:pointer;transition:color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);background:0 0;border-radius:999px;flex-shrink:0;padding:.45rem .95rem;position:relative;overflow:hidden}.cd-tab:hover{color:var(--color-text-primary);border-color:var(--color-border-strong)}.cd-tab.is-active{color:var(--color-text-primary);background:var(--color-surface-raised);border-color:var(--color-border-strong)}.cd-tab-bar{opacity:0;border-radius:2px;height:2px;position:absolute;bottom:3px;left:.9rem;right:.9rem;overflow:hidden}.cd-tab.is-active .cd-tab-bar{opacity:1}.cd-tab-fill{background:var(--gradient-stage);transform-origin:0;height:100%;transition:transform .6s var(--ease-out);display:block;transform:scaleX(0)}.cd-window{border-radius:var(--radius-xl);border:1px solid var(--color-border-strong);background:var(--color-surface);box-shadow:var(--shadow-lg);text-align:left;position:relative;overflow:hidden}.cd-head{border-bottom:1px solid var(--color-border);align-items:center;gap:.7rem;padding:.9rem 1.1rem;display:flex}.cd-avatar{background:var(--gradient-stage);width:34px;height:34px;color:var(--color-on-accent);border-radius:50%;flex-shrink:0;place-items:center;display:grid}.cd-head-text{flex-direction:column;min-width:0;display:flex}.cd-title{font:600 .92rem var(--font-display);color:var(--color-text-primary)}.cd-subtitle{color:var(--color-text-muted);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:.4rem;font-size:.74rem;display:flex;overflow:hidden}.cd-live{background:var(--color-teal);width:7px;height:7px;box-shadow:0 0 0 3px color-mix(in srgb, var(--color-teal) 22%, transparent);border-radius:50%;flex-shrink:0}.cd-replay{border:1px solid var(--color-border);width:30px;height:30px;color:var(--color-text-muted);cursor:pointer;transition:color var(--transition-fast), transform .4s var(--ease-out);background:0 0;border-radius:50%;place-items:center;margin-left:auto;display:grid}.cd-replay:hover{color:var(--color-text-primary);transform:rotate(-180deg)}.cd-messages{height:var(--cd-height);scrollbar-width:none;flex-direction:column;gap:.6rem;padding:1.1rem 1.1rem .6rem;display:flex;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0,#000 18px);mask-image:linear-gradient(#0000 0,#000 18px)}.cd-messages::-webkit-scrollbar{display:none}.cd-messages>*{opacity:0;transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);transform:translateY(10px)scale(.98)}.cd-messages>.cd-in{opacity:1;transform:none}.cd-row{display:flex}.cd-row-user{justify-content:flex-end}.cd-bubble{border-radius:18px;max-width:86%;padding:.65rem .9rem;font-size:.88rem;line-height:1.55}.cd-user{background:var(--cd-user-bg);color:var(--cd-user-fg);transform-origin:100% 100%;border-bottom-right-radius:5px}.cd-bot{background:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-text-primary);border-bottom-left-radius:5px}.chat-demo .cd-body p,.chat-demo .cd-body li{font-size:inherit;line-height:inherit;color:inherit;margin:0}.chat-demo .cd-body li{display:block}.chat-demo .cd-body li:before{content:none}.chat-demo .cd-body p+p,.chat-demo .cd-body ul+p,.chat-demo .cd-body p+ul{margin-top:.45rem}.cd-body ul{flex-direction:column;gap:.3rem;list-style:none;display:flex}.cd-body li{background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:.45rem .65rem;font-size:.84rem;position:relative}.cd-body strong{font-weight:600}.cd-hide{display:none}.cd-link{background:var(--color-text-primary);color:var(--color-bg-primary);border-radius:999px;align-items:center;gap:.35rem;margin-top:.15rem;padding:.4rem .85rem;font-size:.8rem;font-weight:600;display:inline-flex}.cd-link:after{content:"→"}.cd-source{font:500 .68rem var(--font-mono);color:var(--color-text-muted);margin-top:.45rem;display:block}.cd-dots{gap:4px;padding:.8rem .95rem;display:inline-flex}.cd-dots i{background:var(--color-text-muted);border-radius:50%;width:6px;height:6px;animation:1.1s ease-in-out infinite cd-bounce}.cd-dots i:nth-child(2){animation-delay:.15s}.cd-dots i:nth-child(3){animation-delay:.3s}@keyframes cd-bounce{0%,60%,to{opacity:.4;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.cd-tool{border:1px dashed var(--color-border-strong);max-width:100%;color:var(--color-text-secondary);border-radius:999px;align-self:flex-start;align-items:center;gap:.55rem;padding:.45rem .75rem .45rem .5rem;font-size:.78rem;display:flex}.cd-tool-icon{flex-shrink:0;place-items:center;width:20px;height:20px;display:grid;position:relative}.cd-spin{border:2px solid var(--color-border-strong);border-top-color:var(--color-accent);border-radius:50%;animation:.8s linear infinite cd-rotate;position:absolute;inset:2px}.cd-check{background:color-mix(in srgb, var(--color-teal) 18%, transparent);width:20px;height:20px;color:var(--color-teal);transition:transform .35s var(--ease-out);border-radius:50%;place-items:center;display:grid;transform:scale(0)}.cd-tool[data-kind=write] .cd-check{background:color-mix(in srgb, var(--color-amber) 20%, transparent);color:var(--color-amber)}.cd-tool.is-done{border-style:solid;border-color:var(--color-border)}.cd-tool.is-done .cd-spin{display:none}.cd-tool.is-done .cd-check{transform:scale(1)}@keyframes cd-rotate{to{transform:rotate(360deg)}}.cd-tool-label{white-space:nowrap}.cd-tool-name{font-family:var(--font-mono);color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;overflow:hidden}.cd-tool-result{font-family:var(--font-mono);color:var(--color-teal);white-space:nowrap;font-size:.7rem}.cd-tool[data-kind=write] .cd-tool-result{color:var(--color-amber)}.cd-tool-result:not(:empty):before{content:"→ ";color:var(--color-text-muted)}.cd-confirm{border:1px solid color-mix(in srgb, var(--color-amber) 45%, transparent);background:color-mix(in srgb, var(--color-amber) 7%, var(--color-surface));color:var(--color-text-primary);border-radius:14px;align-self:stretch;padding:.85rem .95rem;font-size:.84rem}.cd-confirm-actions{align-items:center;gap:.45rem;margin-top:.65rem;display:flex}.cd-btn{transition:transform .2s var(--ease-out), opacity .3s;border-radius:999px;padding:.35rem .85rem;font-size:.76rem;font-weight:600}.cd-btn-ghost{border:1px solid var(--color-border-strong);color:var(--color-text-secondary)}.cd-btn-ok{background:var(--color-accent-fill);color:var(--color-on-accent)}.cd-confirm.is-pressed .cd-btn-ok{transform:scale(.92)}.cd-confirm-done{color:var(--color-teal);align-items:center;gap:.35rem;font-size:.78rem;font-weight:600;display:none}.cd-confirm.is-approved .cd-btn{display:none}.cd-confirm.is-approved .cd-confirm-done{display:inline-flex}.cd-media{border:1px solid var(--color-border);background:var(--color-bg-secondary);border-radius:14px;width:min(100%,300px);overflow:hidden}.cd-media-meta{flex-direction:column;gap:.1rem;padding:.6rem .8rem .7rem;display:flex}.cd-media-title{color:var(--color-text-primary);font-size:.82rem;font-weight:600}.cd-media-sub{color:var(--color-text-muted);font-size:.72rem}.cd-video-frame{aspect-ratio:16/8;background:radial-gradient(60% 90% at 30% 20%,#ff7a5c8c,#0000 60%),radial-gradient(50% 80% at 75% 70%,#f4b74073,#0000 60%),linear-gradient(160deg,#2a1420,#120c16);place-items:center;display:grid;position:relative}.cd-play{background:#ffffffeb;border-radius:50%;place-items:center;width:46px;height:46px;display:grid;position:relative;box-shadow:0 6px 20px #00000059}.cd-play:after{content:"";border:8px solid #0000;border-left:13px solid #1d1405;border-right-width:0;margin-left:4px}.cd-video .cd-play{animation:2.4s ease-in-out infinite cd-pulse}@keyframes cd-pulse{0%,to{box-shadow:0 0 #ffffff59}50%{box-shadow:0 0 0 10px #fff0}}.cd-podcast{align-items:center;gap:.7rem;padding:.65rem .8rem;display:flex}.cd-play-sm{background:var(--color-accent-fill);flex-shrink:0;width:34px;height:34px}.cd-play-sm:after{border-width:6px 0 6px 10px;margin-left:3px}.cd-pod-body{flex-direction:column;flex:1;gap:.35rem;min-width:0;display:flex}.cd-wave{align-items:center;gap:2px;height:18px;display:flex}.cd-wave i{height:var(--h);background:var(--color-border-strong);border-radius:2px;flex:1}.cd-wave i:nth-child(-n+9){background:var(--color-accent)}.cd-map-canvas{background-color:color-mix(in srgb, var(--color-teal) 8%, var(--color-bg-tertiary));background-image:linear-gradient(28deg, transparent 46%, var(--color-border-strong) 47%, var(--color-border-strong) 53%, transparent 54%), linear-gradient(-62deg, transparent 47%, var(--color-border) 48%, var(--color-border) 52%, transparent 53%), linear-gradient(90deg, var(--color-border) 1px, transparent 1px), linear-gradient(var(--color-border) 1px, transparent 1px);background-size:100% 100%,100% 100%,34px 34px,34px 34px;height:120px;position:relative}.cd-map-canvas svg{width:100%;height:100%;position:absolute;inset:0}.cd-route{fill:none;stroke:var(--color-accent);stroke-width:4px;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340px;animation:cd-draw 1.6s var(--ease-out) .2s forwards}.cd-route-start{fill:var(--color-blue);stroke:var(--color-surface);stroke-width:3px}@keyframes cd-draw{to{stroke-dashoffset:0}}.cd-pin{background:var(--color-coral);border-radius:50% 50% 50% 0;width:18px;height:18px;position:absolute;top:4px;right:8.5%;transform:rotate(-45deg);box-shadow:0 4px 10px #0000004d}.cd-pin:after{content:"";background:#fff;border-radius:50%;position:absolute;inset:5px}.cd-note{color:var(--color-text-muted);background:var(--color-bg-secondary);border-radius:999px;align-self:center;padding:.25rem .75rem;font-size:.72rem}.cd-input{border:1px solid var(--color-border-strong);background:var(--color-bg-secondary);min-height:44px;color:var(--color-text-primary);transition:border-color var(--transition-fast);border-radius:999px;align-items:center;margin:.4rem .9rem .9rem;padding:.55rem .55rem .55rem 1rem;font-size:.86rem;display:flex;position:relative}.cd-input.is-typing{border-color:color-mix(in srgb, var(--color-accent) 55%, transparent)}.cd-placeholder{color:var(--color-text-muted);pointer-events:none;position:absolute;left:1rem}.cd-input.is-typing .cd-placeholder{display:none}.cd-input-text{white-space:nowrap;max-width:calc(100% - 48px);display:inline-block;overflow:hidden}.cd-caret{background:var(--color-accent);width:1.5px;height:1.05em;margin-left:1px;animation:1s step-end infinite cd-blink;display:none}.cd-input.is-typing .cd-caret{display:inline-block}@keyframes cd-blink{50%{opacity:0}}.cd-send{background:var(--color-bg-tertiary);width:30px;height:30px;color:var(--color-text-muted);transition:background var(--transition-fast), color var(--transition-fast), transform .2s var(--ease-out);border-radius:50%;place-items:center;margin-left:auto;display:grid}.cd-input.is-typing .cd-send{background:var(--color-accent-fill);color:var(--color-on-accent)}.cd-input.is-sent .cd-send{transform:scale(.85)}.chat-demo[data-variant=assistant]{--cd-user-bg:var(--color-bg-tertiary);--cd-user-fg:var(--color-text-primary)}.chat-demo[data-variant=assistant] .cd-avatar{background:var(--color-bg-tertiary);color:var(--color-coral);border-radius:10px}.chat-demo[data-variant=assistant] .cd-live{background:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent)}.chat-demo[data-variant=assistant] .cd-subtitle-text{font-family:var(--font-mono);font-size:.7rem}.chat-demo[data-variant=assistant] .cd-bot{background:0 0;border:none;max-width:100%;padding-left:.1rem;padding-right:0}.chat-demo[data-variant=assistant] .cd-tool{background:var(--color-bg-secondary);border-radius:10px;align-self:stretch}.chat-demo[data-variant=assistant] .cd-tool-label{display:none}.chat-demo[data-variant=assistant] .cd-tool-name{color:var(--color-text-primary);font-size:.74rem}.chat-demo[data-variant=assistant] .cd-tool-result{margin-left:auto}.chat-demo[data-variant=assistant] .cd-input{border-radius:16px}@media (width<=600px){.cd-tabs{flex-wrap:wrap;overflow:visible}.cd-messages{height:calc(var(--cd-height) - 40px);padding:.9rem .8rem .5rem}.cd-bubble{max-width:92%}.cd-tool-name{display:none}.chat-demo[data-variant=assistant] .cd-tool-name{display:inline}}
