/* The original interactive product story, drawn with the app's workspace and vector characters. */
.bot-avatar,.bot-avatar.blue,.bot-avatar.coral,.bot-avatar.sage{background:transparent;border-radius:0;box-shadow:none;gap:0}
.bot-avatar::before{display:none}
.bot-avatar>img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.bot-avatar>.figur,#demo-agent-drop>.figur{position:relative;display:block;width:100%;height:100%;line-height:0;flex:none}
.figur>svg.tropfen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.app-window{--figur-glas:rgb(255 255 255 / .16)}
.app-window{background:#0c0c0b;border-color:#3b3834;border-radius:22px;padding:8px;box-shadow:0 28px 90px #0003}
.app-body{grid-template-columns:218px minmax(0,1fr);height:590px}
.app-sidebar{background:transparent;border:0;padding:8px 9px 0 3px;gap:6px;min-width:0}
.demo-app-brand{display:flex;align-items:center;gap:9px;padding:5px 7px 12px;color:#eee}
.demo-app-brand img{border-radius:7px;filter:grayscale(1)}
.demo-app-brand strong{font-size:12px;font-weight:600}
.demo-app-brand>.icon{margin-left:auto;width:13px;height:13px;color:#888}
.demo-app-search,.demo-app-activity{display:flex;align-items:center;gap:8px;min-height:30px;padding:5px 9px;border:1px solid #3b3732;border-radius:14px;color:#8f8d88;font-size:10px}
.demo-app-search{background:#201e1b}
.demo-app-search>.icon,.demo-app-activity>.icon{width:13px;height:13px}
.demo-app-activity{margin-bottom:3px;color:#d8d5d0}
.agent-row{padding:9px 8px;min-height:65px;border-radius:14px;gap:9px}
.agent-row.selected{background:#211f1b;border-color:#665e54}
.agent-row:hover{background:#26221e}
.agent-row strong{font-size:11px;font-weight:500;line-height:1.6}
.agent-row small{font-size:9px;line-height:1.5;color:#9b9892}
.agent-row>.bot-avatar{width:32px;height:36px;position:relative}
.agent-dot{display:none}
.sidebar-bottom{position:static;margin-top:auto;padding:15px 4px 4px;border-top:1px solid #302b26;display:block}
.sidebar-bottom>span{border:1px solid #51473e;border-radius:20px;min-height:30px;display:flex;align-items:center;gap:8px;padding:6px 10px;color:#ddd8d1;font-size:10px}
.sidebar-bottom>span>.icon{width:12px;height:12px}
.sidebar-bottom>small{display:flex;align-items:center;gap:6px;color:#8d8983;font-size:8px;margin:8px 2px 0}
.sidebar-bottom .live-dot{width:4px;height:4px}
.app-chat{position:relative;margin:0 0 0 5px;border:1px solid #403a34;border-radius:19px;background:#141310;overflow:hidden}
.chat-topline{border:0;min-height:48px;height:48px;justify-content:center;padding:8px 18px;flex-shrink:0;position:relative}
.chat-topline>div{padding:4px 11px 4px 6px;border:1px solid #514a42;border-radius:22px;background:#211f1a;gap:7px}
.chat-topline strong{font-size:10px;font-weight:500}
.chat-topline .chat-role{display:inline;color:#a5a098;font-size:9px}
.chat-topline .bot-avatar.tiny{width:21px;height:23px}
.demo-app-tools{position:absolute;right:16px;display:flex;align-items:center;gap:12px;color:#9c968e;font-size:13px}
.demo-app-tools>.icon{width:13px;height:13px}
.demo-agent-intro{display:flex;justify-content:center;height:66px;flex-shrink:0;padding-top:2px}
.demo-agent-intro>img,#demo-agent-drop{display:block;width:54px;height:58px;filter:drop-shadow(0 5px 7px #0002)}
.chat-content{padding:12px 38px 12px;gap:15px;scroll-behavior:auto;scrollbar-color:#514940 transparent}
.chat-date{font-size:8px;color:#898279;letter-spacing:0}
.chat-message{gap:0;width:100%;max-width:760px;align-self:center;animation:message-in .35s ease-out}
.chat-message>.bot-avatar{display:none}
.chat-bubble{font-size:11px;line-height:1.8;max-width:94%;padding:10px 14px;border:1px solid #4b443b;border-radius:15px 15px 15px 4px;background:#211f1a;color:#e1dcd4}
.chat-bubble strong{color:#eee7de;font-size:9px;font-weight:500}
.chat-message.user .chat-bubble{max-width:85%;font-size:11px;padding:10px 14px;border-radius:15px 15px 4px 15px;background:#dfd5c8;color:#2a211b;border-color:#dfd5c8}
.voice-message-label{color:#6b5747;font-size:8px}
.chat-handoff{font-size:9px;line-height:1.6;padding:6px 0 0;margin-top:4px;border:0;background:transparent;color:#b6aea3;white-space:normal}
.chat-handoff .icon{width:12px;height:12px;flex-shrink:0}
.chat-result{border-color:#5b5045;background:#1b1916;padding:12px;border-radius:12px;margin-top:9px}
.chat-result .result-header{font-size:11px;color:#f0e8de;margin-bottom:8px;font-weight:500}
.chat-result p{font-size:10px;line-height:1.9;color:#bfb6aa}
.chat-result .icon{color:#b8a792}
.result-bottom{font-size:8px;color:#a79e91;border-color:#39322b}
.chat-composer{position:relative;flex-shrink:0;border:1px solid #68594a;border-radius:20px;height:68px;min-height:68px;margin:7px 38px 0;padding:12px 14px;color:#aaa095;display:block;font-size:10px;background:#15130f;box-shadow:0 0 0 1px #2d261f}
.demo-composer-actions{position:absolute;bottom:10px;left:14px;right:10px;display:flex;align-items:center;justify-content:space-between}
.demo-composer-actions>.icon{width:12px;height:12px;color:#8a8176}
.demo-composer-actions .composer-send{width:25px;height:25px;border-radius:50%;background:#e1d5c5;color:#292016;display:grid;place-items:center}
.demo-composer-actions .composer-send>.icon{width:13px;height:13px;transform:none}
.chat-caption{font-size:7px;color:#82796e;padding:8px 4px 9px}
.demo-step-card{position:relative;border:1px solid #4c443a;border-radius:14px;background:#211e18;padding:12px 15px;max-width:94%;font-size:10px;color:#c3b9aa}
.demo-step-card::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:2px;border-radius:2px;background:linear-gradient(#74c5ff,#9b85ff,#f4a1c3,#f5c67c)}
.demo-step-heading{display:flex;align-items:center;gap:7px;font-size:10px;margin-bottom:9px;color:#eee2d2}
.demo-step-heading>.icon{width:12px;height:12px}
.demo-step-heading>span{margin-left:auto;font-size:8px;color:#aaa092}
.demo-step-card>div:not(:first-child){display:flex;align-items:center;gap:8px;margin-top:6px}
.demo-step-card>div>.icon{width:12px;height:12px;flex-shrink:0}
.scenario-tabs button:focus-visible,.demo-play:focus-visible{outline:2px solid #eee;outline-offset:3px}
@media(max-width:1000px){.app-body{grid-template-columns:185px minmax(0,1fr);height:580px}.chat-content{padding-inline:25px}.chat-composer{margin-inline:25px}.demo-app-tools{display:none}}
@media(max-width:680px){
 .app-window{padding:5px;border-radius:16px}
 .app-body{grid-template-columns:44px minmax(0,1fr);height:540px}
 .app-sidebar{padding:5px 4px 0 0;gap:10px}
 .demo-app-brand{padding:2px 2px 9px;justify-content:center}
 .demo-app-brand>img{width:24px;height:24px}
 .demo-app-brand>strong,.demo-app-brand>.icon,.demo-app-search,.demo-app-activity,.sidebar-bottom{display:none}
 .agent-row{min-height:45px;padding:6px 2px;border-radius:12px}
 .agent-row>.bot-avatar{width:24px;height:28px}
 .app-chat{border-radius:14px;margin-left:2px}
 .chat-topline{min-height:41px;height:41px;padding:6px}
 .chat-topline>div{padding:3px 9px 3px 5px;gap:6px}
 .chat-topline strong{font-size:10px}
 .chat-topline .chat-role{font-size:8px;max-width:111px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .chat-topline .bot-avatar.tiny{width:17px;height:20px}
 .demo-agent-intro{height:47px;padding:0}
 .demo-agent-intro>img,#demo-agent-drop{width:38px;height:43px}
 .chat-content{padding:9px 12px;gap:12px}
 .chat-date{font-size:7px}
 .chat-bubble,.chat-message.user .chat-bubble{font-size:10px;line-height:1.75;padding:9px 10px;max-width:100%}
 .chat-message.user .chat-bubble{max-width:94%}
 .chat-bubble strong{font-size:8px}
 .chat-handoff{font-size:8px}
 .chat-result{padding:9px}
 .chat-result .result-header{font-size:9px}
 .chat-result p{font-size:9px}
 .result-bottom{font-size:7px}
 .chat-composer{margin:5px 12px 0;height:60px;min-height:60px;font-size:9px;border-radius:17px;padding:10px 11px}
 .demo-composer-actions{left:11px;bottom:8px}
 .chat-caption{font-size:6px;padding:7px 4px}
 .demo-step-card{font-size:9px;max-width:100%;padding:11px}
 .scenario-tabs{justify-content:space-between}
 .scenario-tabs button{font-size:9px;gap:5px;padding:9px 5px}
 .scenario-tabs button .icon{width:12px;height:12px}
 .demo-controls{gap:8px}
 .demo-play{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.chat-message{animation:none}}

/* Underway means a conversation: the same call stage as in the app. */
.demo-call[hidden]{display:none}
.demo-call{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 35%,#26322f35,transparent 62%),#141310;color:#eee8df}
.call-mode>.chat-topline,.call-mode>.demo-agent-intro,.call-mode>.chat-content,.call-mode>.chat-composer,.call-mode>.chat-caption{visibility:hidden}
.demo-call-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;color:#aaa296;font-size:10px}
.demo-call-top>span:first-child{display:flex;align-items:center;gap:8px}
.demo-call-top .icon{width:13px;height:13px}
.demo-call-top>span:last-child{font-size:9px;color:#7f796f}
.demo-call-body{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;justify-content:center;padding:10px 28px;text-align:center}
.demo-call-ring{position:relative;margin:0 0 17px;display:grid;place-items:center}
#call-drop{display:block;width:96px;height:100px}
#call-drop>.figur{position:relative;display:block;width:100%;height:100%;line-height:0}
.demo-call-body h3{margin:10px 0 5px;font-size:24px;line-height:1.3;letter-spacing:-.7px;font-weight:500;color:#eee8df}
.demo-call-state{margin:0;font-size:11px;line-height:1.5;color:#a3b2a3}
.demo-call-ring[data-phase=muted]~.demo-call-state{color:#c5b091}
.demo-call-dialogue{width:100%;max-width:510px;min-height:106px;margin-top:27px;display:flex;flex-direction:column;justify-content:center}
.demo-call-dialogue>span{font-size:8px;letter-spacing:1.4px;color:#8b8276}
.demo-call-dialogue>p{margin:10px 0 0;font-size:17px;line-height:1.7;letter-spacing:-.2px;color:#e0d8cc;text-wrap:pretty}
.demo-call-done{display:flex;align-items:center;gap:7px;font-size:10px;color:#b9c7b5;margin-top:4px}
.demo-call-done[hidden]{display:none}
.demo-call-done .icon{width:13px;height:13px}
.demo-call-controls{display:flex;align-items:center;justify-content:center;gap:15px;padding:16px 20px 0}
.call-round{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1px solid #51483d;background:#242019;color:#bcb3a6}
.call-round .icon{width:17px;height:17px}
.call-round:hover{background:#352d23}
.call-round:disabled{opacity:.35;cursor:default}
.call-round[aria-pressed=true]{background:#6a3a31;border-color:#9d6255;color:#fff}
.call-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:155px;min-height:45px;padding:10px 22px;border-radius:30px;background:#d8e3d3;color:#243126;font:inherit;font-size:12px;font-weight:500;border:1px solid #e0eadb}
.call-action .icon{width:17px;height:17px}
.call-action:hover{background:#eff3ec}
.call-action.connected{background:#b94d40;border-color:#cf6b5d;color:#fff}
.call-action.connected:hover{background:#c95b4e}
.call-action.connected .icon{transform:rotate(135deg)}
.demo-call-foot{font-size:9px;text-align:center;line-height:1.6;color:#8b8276;margin:0;padding:14px 18px 20px}
.demo-call-start{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:20px;background:#e1d5c5;color:#292016;font:inherit;font-size:9px}
.demo-call-start .icon{width:13px;height:13px}
.demo-call-start:hover{background:#f2e7da}
.demo-call button:focus-visible,.demo-call-start:focus-visible{outline:2px solid #f3eee7;outline-offset:4px}
@keyframes call-ripple{0%{transform:scale(.95);opacity:.3}50%{opacity:.8}100%{transform:scale(1.17);opacity:0}}
@media(max-width:680px){
 .demo-call-top{padding:15px 13px;font-size:9px;gap:7px}
 .demo-call-top>span:last-child{display:none}
 .demo-call-body{padding:8px 16px}
 #call-drop{width:78px;height:82px}
 .demo-call-ring{margin-bottom:15px}
 .demo-call-ring::before{inset:-11px}.demo-call-ring::after{inset:-20px}
 .demo-call-body h3{font-size:22px;margin-top:10px}
 .demo-call-state{font-size:10px}
 .demo-call-dialogue{margin-top:20px;min-height:144px}
 .demo-call-dialogue>p{font-size:14px;line-height:1.65}
 .demo-call-dialogue>span{font-size:7px}
 .demo-call-controls{gap:9px;padding:10px 10px 0}
 .call-round{width:34px;height:34px;flex-shrink:0}
 .call-round .icon{width:14px;height:14px}
 .call-action{min-width:0;min-height:40px;padding:9px 15px;font-size:11px;gap:7px}
 .call-action .icon{width:14px;height:14px}
 .demo-call-foot{font-size:8px;padding:13px 12px 17px}
 .demo-call-start{font-size:8px;padding:6px 9px}
}
@media(prefers-reduced-motion:reduce){.demo-call-ring::before{animation:none!important}}