#pp-root{
  position:fixed;
  left:16px;
  bottom:20px;
  z-index:99999;
  pointer-events:none;
}

.pp-card{
  pointer-events:all;
  width:292px;
  background:rgba(14,14,16,0.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:#fff;
  border-radius:16px;
  padding:13px 14px 12px;
  border:1px solid rgba(255,255,255,0.08);
  border-left:3px solid #c9a84c;
  box-shadow:0 8px 32px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  opacity:0;
  transform:translateX(-110%);
  transition:none;
  will-change:transform,opacity;
  box-sizing:border-box;
}

.pp-card.pp-in{
  animation:pp-in .42s cubic-bezier(.22,1,.36,1) forwards;
}

.pp-card.pp-out{
  animation:pp-out .3s cubic-bezier(.55,0,1,.45) forwards;
}

@keyframes pp-in{
  0%  {transform:translateX(-110%);opacity:0}
  100%{transform:translateX(0);opacity:1}
}

@keyframes pp-out{
  0%  {transform:translateX(0);opacity:1}
  100%{transform:translateX(-110%);opacity:0}
}

.pp-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.pp-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color:#fff;
  flex-shrink:0;
  user-select:none;
}

.pp-meta{
  flex:1;
  min-width:0;
}

.pp-name{
  font-size:13.5px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
  margin-bottom:2px;
}

.pp-time{
  font-size:11px;
  color:rgba(255,255,255,.42);
}

.pp-close{
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  font-size:11px;
  line-height:1;
  color:rgba(255,255,255,.45);
  padding:0;
  transition:background .15s,color .15s;
  font-family:inherit;
}

.pp-close:hover,
.pp-close:focus-visible{
  background:rgba(255,255,255,.2);
  color:#fff;
  outline:none;
}

.pp-msg{
  font-size:12.5px;
  color:rgba(255,255,255,.72);
  line-height:1.45;
  margin-bottom:9px;
}

.pp-footer{
  display:flex;
  align-items:center;
  gap:8px;
}

.pp-slots{
  font-size:11.5px;
  font-weight:700;
  color:#f97316;
  white-space:nowrap;
  flex-shrink:0;
}

.pp-bar-track{
  flex:1;
  height:3px;
  background:rgba(255,255,255,.1);
  border-radius:99px;
  overflow:hidden;
}

.pp-bar-fill{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#8b5cf6,#a855f7);
  transition:width .6s ease;
}

@media(max-width:480px){
  #pp-root{
    left:12px;
    bottom:14px;
  }
  .pp-card{
    width:240px;
  }
  .pp-name{font-size:12.5px}
  .pp-msg{font-size:12px}
}