.bot-demo{--tg-bg:#0e1621;--tg-head:#17212b;--tg-in:#182533;--tg-out:#2b5278;--tg-text:#f5f5f5;--tg-hint:#708499;--tg-link:#6ab3f3;--tg-btn:#ffffff17;--tg-btn-hi:#6ab3f352;--tg-out-hint:#7da8d3;--tg-accent:#5288c1;--tg-red:#e5534b;--tg-font:-apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;border-radius:var(--radius-lg);background:var(--zv-bg);color:var(--zv-text);font-size:var(--text-small);flex-direction:column;gap:1.5rem;margin-inline:0;padding:1.5rem;line-height:1.55;display:flex}@media (width>=40rem){.bot-demo{padding:2rem}}.bot-demo .bd-top{flex-direction:column;gap:.75rem;display:flex}.bot-demo .bd-tabs{flex-wrap:wrap;gap:.375rem;display:flex}.bot-demo .bd-tab,.bot-demo .bd-ctl{border:1px solid var(--zv-border-strong);border-radius:var(--radius-md);color:var(--zv-muted);font:500 var(--text-tiny) / 1.3 var(--font-sans);cursor:pointer;background:0 0;padding:.5rem .875rem;transition:color .15s,border-color .15s;position:relative;overflow:hidden}.bot-demo .bd-tab:hover,.bot-demo .bd-ctl:hover{color:var(--zv-text-strong)}.bot-demo .bd-tab[aria-pressed=true]{color:var(--zv-text-strong);border-color:var(--zv-text-strong)}.bot-demo .bd-tab:focus-visible,.bot-demo .bd-ctl:focus-visible{outline:2px solid var(--zv-primary);outline-offset:2px}.bot-demo .bd-prog{background:var(--zv-text-strong);width:0;height:2px;transition:width .3s linear;position:absolute;bottom:0;left:0}.bot-demo .bd-body{justify-items:center;gap:2rem;display:grid}@media (width>=48rem){.bot-demo .bd-body{grid-template-columns:300px minmax(0,1fr);place-items:start stretch}}.bot-demo .bd-device{width:300px;max-width:100%;height:600px;box-shadow:0 0 0 1px var(--zv-border-strong);background:#05080b;border-radius:40px;padding:9px}.bot-demo .bd-screen{background:var(--tg-bg);height:100%;color:var(--tg-text);font-family:var(--tg-font);border-radius:32px;flex-direction:column;display:flex;position:relative;overflow:hidden}.bot-demo .bd-statusbar{background:var(--tg-head);flex:none;justify-content:space-between;align-items:center;height:28px;padding:4px 22px 0;font-size:12px;font-weight:600;display:flex}.bot-demo .bd-notch{background:#05080b;border-radius:12px;width:80px;height:20px}.bot-demo .bd-sys{align-items:flex-end;gap:3px;display:flex}.bot-demo .bd-sys i{background:var(--tg-text);border-radius:1px;width:3px;display:block}.bot-demo .bd-sys i:first-child{height:5px}.bot-demo .bd-sys i:nth-child(2){height:7px}.bot-demo .bd-sys i:nth-child(3){height:9px}.bot-demo .bd-bat{border:1.5px solid var(--tg-text);border-radius:3px;width:19px;height:9px;margin-left:3px;position:relative}.bot-demo .bd-bat:after{content:"";background:var(--tg-text);position:absolute;inset:1px 4px 1px 1px}.bot-demo .bd-head{background:var(--tg-head);flex:none;align-items:center;gap:10px;height:48px;padding:0 10px;display:flex}.bot-demo .bd-back{color:var(--tg-link)}.bot-demo .bd-avatar{color:#fff;background:linear-gradient(160deg,#6fb1ea,#3b77b8);border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-size:13px;font-weight:600;display:grid}.bot-demo .bd-who{flex-direction:column;line-height:1.25;display:flex}.bot-demo .bd-who b{font-size:14px;font-weight:600}.bot-demo .bd-who span{color:var(--tg-hint);font-size:12px}.bot-demo .bd-who .bd-busy{color:var(--tg-link)}.bot-demo .bd-chat{scrollbar-width:none;background:radial-gradient(circle at 20% 15%, #5288c11a, transparent 40%), radial-gradient(circle at 80% 70%, #5288c114, transparent 45%), var(--tg-bg);flex-direction:column;flex:1;gap:5px;padding:10px 8px 6px;display:flex;overflow-y:auto}.bot-demo .bd-chat::-webkit-scrollbar{display:none}.bot-demo .bd-nojs{max-width:18em;color:var(--tg-hint);text-align:center;margin:auto;font-size:13px}.bot-demo.bd-ready .bd-nojs{display:none}.bot-demo .bd-day{background:#00000059;border-radius:10px;align-self:center;margin:4px 0;padding:2px 9px;font-size:12px;font-weight:500}.bot-demo .bd-msg{flex-direction:column;gap:3px;max-width:88%;animation:.28s cubic-bezier(.2,.8,.3,1.2) both bd-pop;display:flex}.bot-demo .bd-in{align-self:flex-start}.bot-demo .bd-out{align-self:flex-end}@keyframes bd-pop{0%{opacity:0;transform:translateY(8px)scale(.97)}}.bot-demo .bd-bubble{overflow-wrap:anywhere;border-radius:14px;padding:6px 9px 5px;font-size:13.5px;line-height:1.38}.bot-demo .bd-in .bd-bubble{background:var(--tg-in);border-bottom-left-radius:4px}.bot-demo .bd-out .bd-bubble{background:var(--tg-out);border-bottom-right-radius:4px}.bot-demo .bd-bubble b{font-weight:600}.bot-demo .bd-bubble .muted{color:var(--tg-hint);font-size:12px}.bot-demo .bd-bubble ul{margin:3px 0 2px;padding-left:14px;list-style:outside}.bot-demo .bd-bubble li{margin:0}.bot-demo .bd-bubble li:before{content:none}.bot-demo .bd-meta{float:right;color:var(--tg-hint);align-items:center;gap:3px;margin:5px 0 -3px 8px;font-size:11px;display:inline-flex}.bot-demo .bd-out .bd-meta{color:var(--tg-out-hint)}.bot-demo .bd-kb{gap:3px;display:grid}.bot-demo .bd-row{grid-auto-columns:1fr;grid-auto-flow:column;gap:3px;display:grid}.bot-demo .bd-btn{background:var(--tg-btn);text-align:center;text-overflow:ellipsis;white-space:nowrap;border-radius:9px;padding:8px 4px;font-size:12.5px;font-weight:500;transition:background .2s,opacity .3s;overflow:hidden}.bot-demo .bd-used .bd-btn{opacity:.45}.bot-demo .bd-used .bd-btn.bd-chosen{opacity:1;background:var(--tg-btn-hi)}.bot-demo .bd-contact,.bot-demo .bd-doc,.bot-demo .bd-voice{align-items:center;gap:9px;display:flex}.bot-demo .bd-contact>span:last-child,.bot-demo .bd-nm{flex-direction:column;min-width:0;display:flex}.bot-demo .bd-cava{background:linear-gradient(160deg,#e7a960,#c9772f);border-radius:50%;flex:none;place-items:center;width:38px;height:38px;font-weight:600;display:grid}.bot-demo .bd-contact small,.bot-demo .bd-voice small{color:var(--tg-out-hint);font-size:12px}.bot-demo .bd-doc{min-width:200px;padding:1px 0 3px}.bot-demo .bd-ic{background:var(--tg-accent);border-radius:50%;flex:none;place-items:center;width:42px;height:42px;display:grid;position:relative}.bot-demo .bd-ring{position:absolute;inset:-1px;transform:rotate(-90deg)}.bot-demo .bd-ring circle{fill:none;stroke:#fff;stroke-width:2.4px;stroke-dasharray:138;stroke-dashoffset:138px;animation:1.1s ease-out forwards bd-load}@keyframes bd-load{to{stroke-dashoffset:0}}.bot-demo .bd-nm b{text-overflow:ellipsis;white-space:nowrap;max-width:170px;font-size:13px;overflow:hidden}.bot-demo .bd-nm small{color:var(--tg-hint);font-size:12px}.bot-demo .bd-doccap,.bot-demo .bd-transcript{margin-top:3px;display:block}.bot-demo .bd-transcript{color:#dbe8f6;font-size:13px;font-style:italic}.bot-demo .bd-play{width:36px;height:36px;color:var(--tg-out);background:#fff;border-radius:50%;flex:none;place-items:center;display:grid}.bot-demo .bd-wave{align-items:center;gap:2px;height:24px;display:flex}.bot-demo .bd-wave i{background:#ffffffd9;border-radius:2px;width:2.5px;display:block}.bot-demo .bd-gen{flex-direction:column;gap:5px;min-width:180px;display:flex}.bot-demo .bd-bar{background:#ffffff1a;border-radius:2px;height:4px;display:block;overflow:hidden}.bot-demo .bd-bar i{background:var(--tg-link);border-radius:2px;width:0;height:100%;transition:width 1.8s ease-in-out;display:block}.bot-demo .bd-bottom{background:var(--tg-head);flex:none}.bot-demo .bd-replykb{flex-direction:column;padding:7px;display:none}.bot-demo .bd-replykb.bd-on{animation:.25s ease-out bd-up;display:flex}@keyframes bd-up{0%{opacity:0;transform:translateY(16px)}}.bot-demo .bd-rbtn{background:var(--tg-out);text-align:center;border-radius:7px;padding:9px;font-size:13.5px;font-weight:500}.bot-demo .bd-input{height:46px;color:var(--tg-hint);align-items:center;gap:10px;padding:0 12px 4px;display:flex}.bot-demo .bd-field{flex:1;font-size:13.5px}.bot-demo .bd-rec{color:var(--tg-text);font-variant-numeric:tabular-nums;align-items:center;gap:7px;display:none}.bot-demo .bd-rec i{background:var(--tg-red);border-radius:50%;width:8px;height:8px;animation:1s infinite bd-blink}@keyframes bd-blink{50%{opacity:.2}}.bot-demo .bd-recording .bd-rec{display:inline-flex}.bot-demo .bd-recording .bd-ph{display:none}.bot-demo .bd-mic{border-radius:50%;place-items:center;width:34px;height:34px;transition:background .2s,transform .2s;display:grid}.bot-demo .bd-recording .bd-mic{background:var(--tg-accent);color:#fff;transform:scale(1.25)}.bot-demo .bd-homebar{place-items:center;height:14px;display:grid}.bot-demo .bd-homebar i{background:#ffffff80;border-radius:2px;width:100px;height:4px}.bot-demo .bd-finger{z-index:5;opacity:0;pointer-events:none;background:#ffffff47;border-radius:50%;width:40px;height:40px;margin:-20px 0 0 -20px;transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),opacity .2s;position:absolute;box-shadow:0 0 0 2px #ffffff8c}.bot-demo .bd-finger.bd-show{opacity:1}.bot-demo .bd-finger.bd-press{animation:.38s ease-out bd-press}@keyframes bd-press{45%{transform:scale(.72)}}.bot-demo .bd-story{flex-direction:column;gap:1.25rem;width:100%;min-width:0;display:flex}.bot-demo .bd-steps{margin:0;padding:0;list-style:none}.bot-demo .bd-steps[hidden]{display:none}.bot-demo .bd-steps li{border-top:1px solid var(--zv-border);grid-template-columns:2rem minmax(0,1fr);gap:.75rem;margin:0;padding:.875rem 0;display:grid}.bot-demo .bd-steps li:last-child{border-bottom:1px solid var(--zv-border)}.bot-demo .bd-steps li:before{content:none}.bot-demo .bd-n{color:var(--zv-muted);font:600 var(--text-label) / 1.4 var(--font-mono);font-variant-numeric:tabular-nums;padding-top:.15rem}.bot-demo .bd-step{flex-direction:column;gap:.25rem;display:flex}.bot-demo .bd-step b{color:var(--zv-muted);font:600 var(--text-body) / 1.35 var(--font-display);transition:color .3s}.bot-demo .bd-step span{color:var(--zv-muted);font-size:var(--text-tiny);line-height:1.5}.bot-demo .bd-steps li[data-state=on] .bd-step b,.bot-demo .bd-steps li[data-state=on] .bd-n{color:var(--zv-text-strong)}.bot-demo .bd-steps li[data-state=done] .bd-step b{color:var(--zv-text)}.bot-demo .bd-controls{gap:.5rem;display:flex}.bot-demo .bd-ctl[hidden]{display:none}.bot-demo .bd-caption{border-top:1px solid var(--zv-border);color:var(--zv-muted);font-size:var(--text-tiny);padding-top:1rem}@media (prefers-reduced-motion:reduce){.bot-demo .bd-msg,.bot-demo .bd-replykb.bd-on,.bot-demo .bd-rec i{animation:none}}
