/* Shared by the mobile launch announcement and its review preview. */
.love-demo { --demo-bubble-bg: #e9e9ed; --demo-bubble-fg: #1a1a1a; --demo-heart-bg: #fff; --demo-hand-stroke: #bababa; color: #fafafa; height: 88px; width: 100%; overflow: visible; }
.demo-row { position: relative; width: 256px; height: 104px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.demo-bubble { position: relative; border-radius: 23px; padding: 14px 17px; background: var(--demo-bubble-bg); color: var(--demo-bubble-fg); font: 16px/1.25 var(--arc-font); cursor: pointer; touch-action: manipulation; user-select: none; }
.demo-bubble:focus-visible { outline: 2px solid var(--dlg-title); outline-offset: 5px; }
.demo-heart { position: absolute; right: -12px; top: -23px; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: var(--demo-heart-bg); opacity: 0; transform: scale(0); }
.demo-heart span { font-size: 20px; line-height: 1; }
.tap-hand { position: absolute; width: 32px; height: 38px; left: 156px; top: 49px; transform-origin: 30% 0; opacity: 0; filter: drop-shadow(0 2px 3px #00000014); pointer-events: none; }
.tap-ring { position: absolute; left: 160px; top: 47px; width: 25px; height: 25px; border: 1.5px solid #a5a5ab; border-radius: 50%; opacity: 0; pointer-events: none; }
.is-playing .tap-hand { animation: doubleTapHand 5.6s ease-in-out infinite; }
.is-playing .tap-ring { animation: doubleTapRing 5.6s ease-out infinite; }
.is-playing .demo-bubble { animation: bubbleTap 5.6s ease-in-out infinite; }
.is-playing .demo-heart { animation: heartReveal 5.6s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes doubleTapHand {
  0%, 9% { opacity: 0; transform: translateY(16px); }
  16% { opacity: 1; transform: translateY(0); }
  21% { opacity: 1; transform: translateY(-7px) scale(.95); }
  25% { opacity: 1; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-7px) scale(.95); }
  35% { opacity: 1; transform: translateY(0); }
  46%,100% { opacity: 0; transform: translateY(14px); }
}
@keyframes doubleTapRing {
  0%,19% { opacity: 0; transform: scale(.4); }
  21% { opacity: .7; transform: scale(.5); }
  26% { opacity: 0; transform: scale(1.5); }
  28% { opacity: 0; transform: scale(.4); }
  30% { opacity: .7; transform: scale(.5); }
  37%,100% { opacity: 0; transform: scale(1.5); }
}
@keyframes bubbleTap { 0%,19%,25%,28%,35%,100% { transform: scale(1); } 21%,30% { transform: scale(.975); } }
@keyframes heartReveal {
  0%,30% { opacity: 0; transform: scale(0); }
  36% { opacity: 1; transform: scale(1.2); }
  41% { opacity: 1; transform: scale(.94); }
  46%,83% { opacity: 1; transform: scale(1); }
  92%,100% { opacity: 0; transform: scale(.85); }
}
.demo-loved .demo-heart { opacity: 1; transform: scale(1); animation: instantHeart .5s cubic-bezier(.2,.8,.2,1); }
.is-paused * { animation-play-state: paused !important; }
@keyframes instantHeart { from { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: scale(1.2); } to { transform: scale(1); } }
html:not([data-theme="light"]):not([data-chat-theme-tone]) .love-demo { --demo-bubble-bg: #39393e; --demo-bubble-fg: #f5f5f5; --demo-heart-bg: #505057; --demo-hand-stroke: #7b7b80; color: #aaaab0; }
@media (prefers-reduced-motion: reduce) {
  .is-playing .tap-hand, .is-playing .tap-ring, .is-playing .demo-bubble, .is-playing .demo-heart, .demo-loved .demo-heart { animation: none; }
  .demo-heart { opacity: 1; transform: none; }
}