.pp-tpl-glass {
background: color-mix(in srgb, var(--pp-bg) 74%, transparent);
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
border: 1px solid color-mix(in srgb, var(--pp-text) 14%, transparent);
}
.pp-tpl-glass .pp-media {
background: color-mix(in srgb, var(--pp-accent) 22%, transparent);
} .pp-tpl-pill { border-radius: 999px; }
.pp-tpl-pill .pp-inner { padding: 8px 46px 8px 8px; gap: 12px; }
.pp-tpl-pill .pp-media {
flex-basis: 48px;
width: 48px;
height: 48px;
border-radius: 50%;
}
.pp-tpl-pill .pp-meta { font-size: 11.5px; }
.pp-tpl-pill .pp-close { top: 50%; right: 12px; transform: translateY(-50%); }
.pp-tpl-pill.pp-size-sm .pp-media { flex-basis: 38px; width: 38px; height: 38px; }
.pp-tpl-pill.pp-size-lg .pp-media { flex-basis: 58px; width: 58px; height: 58px; } @media (max-width: 640px) {
.pp-container.pp-mpos-top {
top: calc(12px + env(safe-area-inset-top, 0px));
bottom: auto;
}
.admin-bar .pp-container.pp-mpos-top { top: 58px; }
.pp-mpos-top .pp-notice { --pp-shift: -14px; }
} .pp-motion-pulse.is-visible .pp-media {
animation: pp-pulse 2.6s ease-out 1s infinite;
}
@keyframes pp-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pp-accent) 45%, transparent); }
70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--pp-accent) 0%, transparent); }
} .pp-motion-nudge { transform-origin: 50% 100%; }
.pp-motion-nudge.is-visible {
animation: pp-nudge 0.9s ease-in-out 1.6s 1 both;
}
@keyframes pp-nudge {
0%, 100% { rotate: 0deg; }
20% { rotate: -2deg; }
40% { rotate: 1.6deg; }
60% { rotate: -1deg; }
80% { rotate: 0.5deg; }
} .pp-motion-shine::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
background-size: 250% 100%;
background-position: 150% 0;
opacity: 0;
}
.pp-motion-shine.is-visible::after {
animation: pp-shine 1.3s ease-in-out 1.2s 1 both;
}
@keyframes pp-shine {
from { opacity: 1; background-position: 150% 0; }
to { opacity: 1; background-position: -50% 0; }
}