Floating Live Sales Proof Toast

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="proof-toast"><div class="pt-avatar"><span>JD</span><span class="pt-online"></span></div><div class="pt-info"><p class="pt-title"><b>John D.</b> purchased</p><p class="pt-prod">Minimalist Leather Backpack</p><span class="pt-time">2 minutes ago • Verified</span></div></div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.proof-toast { width: 220px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 10px; display: flex; gap: 10px; align-items: center; font-family: system-ui, sans-serif; box-shadow: 0 20px 40px rgba(0,0,0,0.3); margin: auto; box-sizing: border-box; animation: toastSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes toastSlideIn { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.pt-avatar { position: relative; width: 32px; height: 32px; background: #3b82f6; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; flex-shrink: 0; }
.pt-online { position: absolute; bottom: 0; right: 0; width: 8px; height: 8px; background: #22c55e; border: 2px solid #0f172a; border-radius: 50%; }
.pt-info { flex: 1; overflow: hidden; }
.pt-title { margin: 0; font-size: 7px; color: #94a3b8; }
.pt-title b { color: #f8fafc; }
.pt-prod { margin: 1px 0; font-size: 8px; font-weight: 800; color: #38bdf8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-time { font-size: 6px; color: #64748b; font-weight: 700; }