/* PURCHASE BAR */
    .purchase-bar {
      position: fixed;
      left: 16px;
      bottom: 16px;
      background: linear-gradient(90deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
      padding: 10px 14px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 240px;
      max-width: 90%;
      z-index: 9999;
      font-size: 0.95rem;
      transition: transform 300ms ease, opacity 300ms ease;
    }

    .purchase-bar .avatar {
      width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#ff7f11,#e63946); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:0.9rem;flex-shrink:0;
    }

    .purchase-bar .msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .purchase-bar .close-btn { background: none; border: none; font-size: 1rem; cursor: pointer; color: #999; }

    .purchase-bar.hidden { opacity: 0; transform: translateY(20px); pointer-events: none; visibility: hidden; }

    /* animation in/out */
    .purchase-bar.enter { animation: barIn 600ms ease forwards; }
    .purchase-bar.exit { animation: barOut 600ms ease forwards; }

    @keyframes barIn {
      0% { transform: translateY(16px) scale(0.98); opacity: 0; }
      60% { transform: translateY(-6px) scale(1.02); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    @keyframes barOut {
      0% { transform: translateY(0); opacity: 1; }
      100% { transform: translateY(20px); opacity: 0; }
    }

    @media (max-width: 480px) {
      .purchase-bar { left: 12px; right: 12px; bottom: 12px; min-width: auto; padding: 10px; }
      .purchase-bar .msg { font-size: 0.9rem; }
    }