.phone{height:620px;max-height:75vh;min-height:420px;aspect-ratio:auto}
.hero-chat{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:12px 4px 14px}
.hero-chat .bubble,.hero-chat .typing{flex-shrink:0}
.hero-chat .typing{display:inline-flex;gap:6px;align-items:center;width:fit-content;padding:12px 14px;border:1px solid var(--stroke);border-radius:14px;background:var(--glass);opacity:1;transform:none}
.hero-chat .typing.user{margin-left:auto;background:rgba(124,77,255,.25);border-color:rgba(124,77,255,.35)}
.hero-chat .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:demo-dot 1.2s infinite}
.hero-chat .dot:nth-child(2){animation-delay:.2s}.hero-chat .dot:nth-child(3){animation-delay:.4s}
@keyframes demo-dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.chat-meta{display:block;text-align:right;font-size:10px;opacity:.65;margin-top:5px}
.chat-reaction{display:table;margin-top:7px;padding:2px 8px;border-radius:20px;background:var(--glass-2);border:1px solid var(--stroke);font-size:12px;animation:chat-in .3s ease-out}
.phone .bubble.sticker{background:none;border:0;text-align:center;padding:6px 14px}
.sticker-art{display:block;font-size:64px;line-height:1.3;filter:drop-shadow(0 5px 8px #7c4dff40)}
.bubble.sticker>span:not(.sticker-art){font-weight:700;font-size:13px}
.chat-controls{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--stroke);padding-top:10px}
.chat-controls button{font:inherit;font-size:12px;color:var(--txt);background:var(--glass);border:1px solid var(--stroke);border-radius:10px;padding:9px 12px;cursor:pointer}
.chat-controls button:hover{background:var(--glass-2)}
.chat-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chat-controls button:disabled{opacity:.45;cursor:default}
.chat-hint{color:var(--muted);font-size:11px}
.is-paused *{animation-play-state:paused!important}
@media(max-width:600px){.phone{height:480px;max-height:none;min-height:420px}}
@media(prefers-reduced-motion:reduce){.chat-reaction,.hero-chat .dot{animation:none}}

/* Keep the Telegram preview palette independent of the landing theme. */
.as-card.phone{height:620px;max-height:80vh;min-height:420px;aspect-ratio:auto;padding:0;gap:0;border:1px solid #303e4b;border-radius:16px;background:#0e1621;color:#f5f5f5;font-family:Roboto,"Segoe UI",Arial,sans-serif;box-shadow:0 18px 55px #0005}
.phone .phone-top{padding:12px 18px;gap:12px;border:0;background:#17212b;flex-shrink:0}
.phone .chat-avatar{width:42px;height:42px;flex-shrink:0;background:linear-gradient(#6cb4ef,#3983c4);color:white;font-size:20px;font-weight:500}
.phone .phone-top b{font-size:16px;font-weight:600;line-height:21px}
.phone .phone-top small{color:#6ab2f2;font-size:13px;line-height:18px;margin-top:0}
.phone .hero-chat{overflow-y:auto;scrollbar-color:#405363 transparent;padding:14px 16px 18px;gap:7px;background-color:#0e1621;background-image:radial-gradient(ellipse at 15% 20%,#20354855,transparent 60%),radial-gradient(ellipse at 90% 85%,#223e3555,transparent 65%)}
.phone .hero-chat .bubble{position:relative;padding:8px 11px 6px;max-width:86%;border:0;border-radius:12px;box-shadow:0 1px 2px #0003;font-size:14px;line-height:1.4;overflow-wrap:anywhere;color:#f5f5f5}
.phone .hero-chat .bubble.bot{background:#182533;border-bottom-left-radius:4px}
.phone .hero-chat .bubble.user{background:#2b5278;border-bottom-right-radius:4px}
.phone .hero-chat .bubble.bot::before,.phone .hero-chat .bubble.user::before{content:"";position:absolute;bottom:0;width:8px;height:12px}
.phone .hero-chat .bubble.bot::before{left:-6px;background:#182533;clip-path:polygon(100% 0,100% 100%,0 100%)}
.phone .hero-chat .bubble.user::before{right:-6px;background:#2b5278;clip-path:polygon(0 0,100% 100%,0 100%)}
.phone .chat-meta{font-size:11px;line-height:14px;color:#8fa4b7;margin-top:2px;opacity:1}
.phone .user .chat-meta{color:#a4c4e1}
.chat-checks{display:inline-block;margin-left:5px;letter-spacing:-5px;padding-right:5px;color:#78c6fa;font-size:13px}
.chat-date{align-self:center;flex-shrink:0;margin:0 0 6px;padding:4px 10px;border-radius:14px;background:#263d4b;color:#dce6ed;font-size:12px;line-height:16px}
.phone .hero-chat .typing{gap:4px;padding:14px;border:0;border-radius:12px;background:#182533}
.phone .hero-chat .typing.user{background:#2b5278}
.phone .hero-chat .dot{width:5px;height:5px;background:#8bb6d9}
.phone .chat-reaction{margin-top:5px;padding:2px 7px;background:#264562;color:#a9d5f7;border:0}
.phone .hero-chat .bubble.sticker{background:none;box-shadow:none;border:0;text-align:center;padding:6px 14px}
.phone .hero-chat .bubble.sticker::before{display:none}
.chat-composer{display:flex;align-items:center;gap:14px;padding:12px 17px;background:#17212b;color:#8496a6;font-size:14px;flex-shrink:0;user-select:none}
.composer-smile{font-size:26px;line-height:26px}.chat-composer svg{margin-left:auto}
.phone .chat-hint{margin:0;padding:10px 12px 6px;background:#17212b;color:#93a6b7;font-size:11px;line-height:16px}
.phone .chat-controls{background:#17212b;padding:4px 10px 10px;border:0}
.phone .chat-controls button{color:#74bafa;background:transparent;border:0;border-radius:6px;padding:9px 10px;min-height:36px}
.phone .chat-controls button:hover{background:#223446}
.phone .chat-controls button:focus-visible{outline-color:#74bafa}
.as-card.phone .hero-chat .bubble{color:#f5f5f5;font-size:16px;line-height:1.45}
.as-card.phone .chat-hint{font-size:12px;line-height:17px}
[data-theme="light"] .as-card.phone{background:#dce4d5;color:#17212b;border-color:#d5ddd3;box-shadow:0 16px 40px #2335241a}
[data-theme="light"] .as-card.phone .phone-top,[data-theme="light"] .as-card.phone .chat-composer,[data-theme="light"] .as-card.phone .chat-hint,[data-theme="light"] .as-card.phone .chat-controls{background:#fff}
[data-theme="light"] .as-card.phone .phone-top b{color:#17212b}
[data-theme="light"] .as-card.phone .phone-top small{color:#2874a8}
[data-theme="light"] .as-card.phone .hero-chat{background-color:#dce4d5;background-image:radial-gradient(ellipse at 15% 20%,#c8dabf88,transparent 60%),radial-gradient(ellipse at 90% 85%,#bdd5d388,transparent 65%);scrollbar-color:#9aaf99 transparent}
[data-theme="light"] .as-card.phone .hero-chat .bubble.bot,[data-theme="light"] .as-card.phone .hero-chat .typing{background:#fff;color:#18222d}
[data-theme="light"] .as-card.phone .hero-chat .bubble.user,[data-theme="light"] .as-card.phone .hero-chat .typing.user{background:#e3ffc9;color:#18222d}
[data-theme="light"] .as-card.phone .hero-chat .bubble.bot::before{background:#fff}
[data-theme="light"] .as-card.phone .hero-chat .bubble.user::before{background:#e3ffc9}
[data-theme="light"] .as-card.phone .chat-meta{color:#60726b}
[data-theme="light"] .as-card.phone .chat-checks{color:#3c7e35}
[data-theme="light"] .as-card.phone .chat-date{background:#526b50;color:#fff}
[data-theme="light"] .as-card.phone .chat-reaction{background:#d3eac9;color:#345e32}
[data-theme="light"] .as-card.phone .hero-chat .bubble.sticker{background:transparent;color:#18222d}
[data-theme="light"] .as-card.phone .chat-composer,[data-theme="light"] .as-card.phone .chat-hint{color:#596e7c}
[data-theme="light"] .as-card.phone .chat-controls button{color:#246d9d}
[data-theme="light"] .as-card.phone .chat-controls button:hover{background:#edf4f8}
[data-theme="light"] .as-card.phone .hero-chat .dot{background:#607c90}
@media(max-width:600px){.as-card.phone{height:560px;max-height:none;min-height:420px}.phone .hero-chat{padding-right:12px;padding-left:12px}.phone .hero-chat .bubble{max-width:89%}}