/* Aperçu « Bot Telegram sans mini app » : une conversation Telegram simulée dans la scène des démos */
.dstage.has-chat{padding:0;place-items:stretch;min-height:440px}
.tgc{display:flex;flex-direction:column;height:440px;width:100%;background:#0e1621;font-family:Manrope,system-ui,sans-serif;text-align:left}
.tgc-h{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#17212b;border-bottom:1px solid #0b1118;flex:none}
.tgc-h i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:17px;background:var(--goldgrad);color:#1a1200;flex:none}
.tgc-h b{display:block;font-size:14px;color:#fff;line-height:1.2}
.tgc-h small{font-size:11.5px;color:#6c7883}
.tgc-h small.on{color:#64b5ef}
.tgc-h em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;padding:4px 8px;border-radius:99px;background:#2b5278;color:#cfe6ff}
.tgc-b{flex:1;overflow-y:auto;padding:12px 10px 6px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none;background:radial-gradient(90% 60% at 80% 10%,#16243388,transparent 70%),#0e1621}
.tgc-b::-webkit-scrollbar{display:none}
.tgm{max-width:84%;padding:7px 10px 6px;border-radius:14px;font-size:13.5px;line-height:1.4;color:#e9eef3;position:relative;animation:tgIn .28s cubic-bezier(.2,.9,.3,1.2) both;word-wrap:break-word}
.tgm.bot{align-self:flex-start;background:#182533;border-bottom-left-radius:4px}
.tgm.me{align-self:flex-end;background:#2b5278;border-bottom-right-radius:4px}
.tgm.sys{align-self:center;background:#00000055;color:#c9d3dc;font-size:11.5px;padding:4px 10px;border-radius:99px}
.tgm.alert{align-self:stretch;max-width:100%;background:linear-gradient(135deg,#3a1d06,#1d1206);border:1px solid #f5b40066}
.tgm b{color:#fff}
.tgm .gold{color:var(--gold2)}
.tgm time{display:block;text-align:right;font-size:10px;color:#6c7883;margin-top:2px}
.tgm.me time{color:#9cc1e6}
.tgm .card{margin:-7px -10px 7px;height:96px;border-radius:14px 14px 0 0;display:grid;place-items:center;font-size:44px;background:linear-gradient(135deg,#3a2a00,#0b0a08)}
.tgm .card.v{background:linear-gradient(135deg,#062a1d,#0b0a08)}
.tgm .card.p{background:linear-gradient(135deg,#2a0630,#0b0a08)}
.tgm ul{margin:4px 0 0;padding-left:16px}
.tgk{align-self:flex-start;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;width:84%;margin-top:-2px;animation:tgIn .3s .05s both}
.tgk.one{grid-template-columns:1fr}
.tgk.three{grid-template-columns:repeat(3,1fr)}
.tgk button{padding:8px 6px;border-radius:9px;background:#2b3a4a99;color:#fff;font-size:12.5px;font-weight:700;border:0;backdrop-filter:blur(4px);transition:transform .12s,background .2s}
.tgk button:active{transform:scale(.96)}
.tgk button.hint{animation:tgHint 1.4s ease-in-out infinite}
.tgk.used button{opacity:.45;pointer-events:none}
.tgk.used button.picked{opacity:1;background:#3d6a99}
.tgt{align-self:flex-start;background:#182533;border-radius:14px;border-bottom-left-radius:4px;padding:10px 12px;display:flex;gap:4px}
.tgt i{width:6px;height:6px;border-radius:50%;background:#6c7883;animation:tgDot 1s infinite}
.tgt i:nth-child(2){animation-delay:.15s}.tgt i:nth-child(3){animation-delay:.3s}
.tgc-f{flex:none;display:flex;gap:6px;padding:8px;background:#17212b;border-top:1px solid #0b1118;overflow-x:auto;scrollbar-width:none}
.tgc-f::-webkit-scrollbar{display:none}
.tgc-f button{flex:none;padding:8px 11px;border-radius:99px;background:#242f3d;color:#dfe7ee;font-size:12px;font-weight:700;border:1px solid #2f3d4c}
.tgc-f button.hint{border-color:#64b5ef;animation:tgHint 1.4s ease-in-out infinite}
.tgc-f .typing{flex:1;display:flex;align-items:center;padding:8px 12px;border-radius:99px;background:#242f3d;color:#dfe7ee;font-size:13px;min-height:34px}
.tgc-f .typing::after{content:"";width:2px;height:15px;background:#64b5ef;margin-left:2px;animation:tgCaret .8s steps(1) infinite}
.tgc-f .send{flex:none;width:34px;height:34px;border-radius:50%;background:#2b5278;color:#fff;display:grid;place-items:center;font-size:15px;padding:0}
.tg-split{display:flex;gap:6px;align-items:center;margin:2px 0;font-size:10.5px;font-weight:800;letter-spacing:.6px;color:#64b5ef;text-transform:uppercase;align-self:center}
.tg-count{font-family:"JetBrains Mono",monospace;font-weight:800;color:var(--gold2)}
@keyframes tgIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tgDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes tgHint{0%,100%{box-shadow:0 0 0 0 #64b5ef00}50%{box-shadow:0 0 0 3px #64b5ef66}}
@keyframes tgCaret{50%{opacity:0}}
.tgm,.tgk,.tgt,.tg-split{flex:none}
.tg-suivi{display:flex;gap:5px;margin-top:8px}.tg-suivi i{flex:1;height:5px;border-radius:5px;background:#ffffff1f}.tg-suivi i.on{background:linear-gradient(90deg,#ffd65a,#f5b400);box-shadow:0 0 8px #f5b40066}