/* Animated emoji gifts (js/emojigifts.js): the big emoji in a private conversation, the picker's tab, and the
   full-screen effect over everything. */
.eg-msg { align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 70%; }
.eg-msg.mine { align-self: flex-end; }
[dir="rtl"] .dm-msgs .eg-msg { align-self: flex-end; }
[dir="rtl"] .dm-msgs .eg-msg.mine { align-self: flex-start; }
.eg-big { padding: 0; background: none; border: 0; line-height: 0; cursor: pointer; }
.eg-big-pic { width: 132px; height: 132px; object-fit: contain; }
.eg-big-pic.emoji { font-size: 96px; line-height: 1; }
.eg-at { color: #9a90b3; font-size: 11px; }

/* the picker's tab */
.eg-lead { margin: 2px 4px 8px; color: var(--muted); font-size: 12.5px; }
.eg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.eg-pic { width: 58px; height: 58px; object-fit: contain; }
.eg-pic.emoji { font-size: 40px; }
.eg-price { font-size: 11px; font-weight: 800; color: #6b4fa0; }
.eg-price .price svg { width: 13px; height: 13px; }

/* the full-screen effect: the gift's SVGA filling the screen, the emoji popping in the middle */
.eg-fx { position: fixed; inset: 0; z-index: 400; pointer-events: none; display: grid; place-items: center; animation: eg-in .25s ease-out; }
.eg-fx.out { opacity: 0; transition: opacity .35s; }
.eg-fx-svga { position: absolute; inset: 0; }
.eg-fx-emoji { position: relative; animation: eg-pop 2.4s cubic-bezier(.2, 1.4, .4, 1) both; }
.eg-fx-pic { width: min(56vw, 300px); height: min(56vw, 300px); object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .35)); }
.eg-fx-pic.emoji { font-size: min(40vw, 220px); }
@keyframes eg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eg-pop {
  0% { transform: scale(.2) translateY(30vh); opacity: 0; }
  25% { transform: scale(1.1) translateY(0); opacity: 1; }
  40% { transform: scale(1); }
  80% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.9) translateY(-6vh); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .eg-fx-emoji { animation-duration: .01s; } }

/* the picker's tiles: the emoji at a size that leaves its price in sight (the picker's general tile rule fills the
   whole tile with the picture) */
.mp-tile.eg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: auto; min-block-size: 96px; padding: 10px 4px 8px; }
.mp-tile.eg-tile img.eg-pic { inline-size: 60%; block-size: auto; max-inline-size: 64px; aspect-ratio: 1 / 1; object-fit: contain; }
.mp-tile.eg-tile .eg-pic.emoji { font-size: 38px; line-height: 1.1; }
.mp-tile.eg-tile .eg-price { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(80, 50, 140, .15); line-height: 18px; }