.gift-motion-host{position:relative;display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}
.gift-motion-image{display:block;width:100%;height:100%;object-fit:cover}
[data-gift-fit="contain"] .gift-motion-image{object-fit:contain}
.gift-motion-lottie,.gift-motion-lottie>svg{display:block;width:100%!important;height:100%!important;max-width:100%;max-height:100%}
.gift-motion-placeholder{display:flex;width:100%;height:100%;min-height:48px;align-items:center;justify-content:center;font-size:42px;line-height:1;color:#94a3b8}
@media (prefers-reduced-motion:reduce){.gift-motion-lottie{animation:none!important}}

/*
 * Chat gifts: stable CSS fallback for dynamically loaded messages.
 * Do not rely on Tailwind arbitrary-value classes here: Safari/iOS can render
 * AJAX-inserted gift markup before those runtime utilities are generated.
 */
#chatMessages .chat-msg-gift{
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  min-width:0!important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
#chatMessages .chat-msg-gift *,
#chatMessages .chat-msg-gift *::before,
#chatMessages .chat-msg-gift *::after{
  box-sizing:border-box;
}
#chatMessages .chat-gift-event-inner{
  display:block!important;
  width:100%!important;
  max-width:332px!important;
  flex:0 1 332px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
#chatMessages .chat-gift-event-line{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:100%!important;
  margin:0 auto 12px!important;
  padding:6px 12px!important;
  border:1px solid rgba(15,23,42,.05)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.80)!important;
  color:#334155!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:16px!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  box-shadow:0 1px 2px rgba(15,23,42,.08)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}
:is(html.dark,body.dark) #chatMessages .chat-gift-event-line,
.dark #chatMessages .chat-gift-event-line{
  border-color:rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.10)!important;
  color:rgba(255,255,255,.85)!important;
}
#chatMessages .chat-gift-card{
  display:block!important;
  width:100%!important;
  max-width:272px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:16px!important;
  border-radius:30px!important;
  text-align:center!important;
  box-shadow:0 14px 34px rgba(0,0,0,.14)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  overflow:hidden!important;
}
#chatMessages .chat-gift-card.is-outgoing{
  border:1px solid rgba(255,255,255,.10)!important;
  background:radial-gradient(circle at top,rgba(255,255,255,.18),rgba(255,255,255,.08) 45%,rgba(255,255,255,.04) 100%)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.10)!important;
}
#chatMessages .chat-gift-card.is-incoming{
  border:1px solid rgba(15,23,42,.05)!important;
  background:radial-gradient(circle at top,rgba(255,255,255,.98),rgba(241,245,249,.92) 52%,rgba(226,232,240,.88) 100%)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.14),inset 0 0 0 1px rgba(15,23,42,.05)!important;
}
:is(html.dark,body.dark) #chatMessages .chat-gift-card.is-incoming,
.dark #chatMessages .chat-gift-card.is-incoming{
  border-color:rgba(255,255,255,.10)!important;
  background:radial-gradient(circle at top,rgba(255,255,255,.14),rgba(255,255,255,.07) 52%,rgba(255,255,255,.04) 100%)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.10)!important;
}
#chatMessages .chat-gift-card-media{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:212px!important;
  height:212px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow:hidden!important;
}
#chatMessages .chat-gift-media{
  display:block!important;
  width:196px!important;
  height:196px!important;
  max-width:196px!important;
  max-height:196px!important;
  flex:0 0 196px!important;
}
#chatMessages img.chat-gift-media-image{
  object-fit:contain!important;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.22));
}
#chatMessages .chat-gift-media-tgs .gift-motion-host,
#chatMessages .chat-gift-media-tgs .gift-motion-lottie,
#chatMessages .chat-gift-media-tgs .gift-motion-lottie > svg{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
}
#chatMessages .chat-gift-placeholder{
  font-size:96px!important;
  line-height:1!important;
}
#chatMessages .chat-gift-label{
  margin-top:12px!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:13px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
#chatMessages .chat-gift-name{
  margin-top:4px!important;
  font-size:18px!important;
  font-weight:600!important;
  line-height:20px!important;
}
#chatMessages .chat-gift-text{
  margin-top:8px!important;
  font-size:14px!important;
  line-height:20px!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}
#chatMessages .chat-gift-card.is-outgoing .chat-gift-label{color:rgba(255,255,255,.75)!important;}
#chatMessages .chat-gift-card.is-outgoing .chat-gift-name{color:#fff!important;}
#chatMessages .chat-gift-card.is-outgoing .chat-gift-text{color:rgba(255,255,255,.88)!important;}
#chatMessages .chat-gift-card.is-incoming .chat-gift-label{color:#64748b!important;}
#chatMessages .chat-gift-card.is-incoming .chat-gift-name{color:#0f172a!important;}
#chatMessages .chat-gift-card.is-incoming .chat-gift-text{color:#334155!important;}
:is(html.dark,body.dark) #chatMessages .chat-gift-card.is-incoming .chat-gift-label,
.dark #chatMessages .chat-gift-card.is-incoming .chat-gift-label{color:#a3a3a3!important;}
:is(html.dark,body.dark) #chatMessages .chat-gift-card.is-incoming .chat-gift-name,
.dark #chatMessages .chat-gift-card.is-incoming .chat-gift-name{color:#fff!important;}
:is(html.dark,body.dark) #chatMessages .chat-gift-card.is-incoming .chat-gift-text,
.dark #chatMessages .chat-gift-card.is-incoming .chat-gift-text{color:rgba(255,255,255,.88)!important;}

/* Keep the same compact geometry on real iPhones, including Safari/PWA. */
@supports (-webkit-touch-callout:none){
  #chatMessages .chat-gift-event-inner{max-width:332px!important;}
  #chatMessages .chat-gift-card{max-width:272px!important;}
  #chatMessages .chat-gift-card-media{max-width:212px!important;height:212px!important;}
  #chatMessages .chat-gift-media{width:196px!important;height:196px!important;max-width:196px!important;max-height:196px!important;}
}


/* Light theme without wallpaper: outgoing gifts use the selected outgoing-message color. */
body:not(.dark) #chatDialog[data-wallpaper="none"] #chatMessages .chat-gift-card.is-outgoing,
body:not(.dark) #chatDialog[data-wallpaper=""] #chatMessages .chat-gift-card.is-outgoing,
body:not(.dark) #chatDialog:not([data-wallpaper]) #chatMessages .chat-gift-card.is-outgoing{
  background:var(--chat-action-bg,linear-gradient(135deg,rgba(47,157,226,1),rgba(63,111,210,1)))!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:var(--chat-action-shadow,0 12px 26px rgba(63,111,210,.26)),0 14px 34px rgba(15,23,42,.12)!important;
}
body:not(.dark) #chatDialog[data-wallpaper="none"] #chatMessages .chat-gift-card.is-outgoing .chat-gift-label,
body:not(.dark) #chatDialog[data-wallpaper=""] #chatMessages .chat-gift-card.is-outgoing .chat-gift-label,
body:not(.dark) #chatDialog:not([data-wallpaper]) #chatMessages .chat-gift-card.is-outgoing .chat-gift-label{
  color:rgba(255,255,255,.78)!important;
}
body:not(.dark) #chatDialog[data-wallpaper="none"] #chatMessages .chat-gift-card.is-outgoing .chat-gift-name,
body:not(.dark) #chatDialog[data-wallpaper=""] #chatMessages .chat-gift-card.is-outgoing .chat-gift-name,
body:not(.dark) #chatDialog:not([data-wallpaper]) #chatMessages .chat-gift-card.is-outgoing .chat-gift-name{
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.16);
}
body:not(.dark) #chatDialog[data-wallpaper="none"] #chatMessages .chat-gift-card.is-outgoing .chat-gift-text,
body:not(.dark) #chatDialog[data-wallpaper=""] #chatMessages .chat-gift-card.is-outgoing .chat-gift-text,
body:not(.dark) #chatDialog:not([data-wallpaper]) #chatMessages .chat-gift-card.is-outgoing .chat-gift-text{
  color:rgba(255,255,255,.92)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.14);
}