/* WidyaHerma Social Proof — Frontend Popup */
.whsp-popup {
  position: fixed;
  bottom: 24px;
  z-index: 99999;
  max-width: 320px;
  width: calc(100vw - 48px);
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  border-left: 4px solid #2563EB;
  transition: border-color .3s;
  cursor: default;
}
.whsp-popup.whsp-left  { left: 24px; }
.whsp-popup.whsp-right { right: 24px; }

/* Animations */
@keyframes whsp-in-left  { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes whsp-in-right { from{opacity:0;transform:translateX(24px)}  to{opacity:1;transform:translateX(0)} }
@keyframes whsp-out      { from{opacity:1;transform:translateY(0)}     to{opacity:0;transform:translateY(12px)} }

.whsp-popup.whsp-anim-in.whsp-left  { animation: whsp-in-left  .4s cubic-bezier(.34,1.56,.64,1) forwards; }
.whsp-popup.whsp-anim-in.whsp-right { animation: whsp-in-right .4s cubic-bezier(.34,1.56,.64,1) forwards; }
.whsp-popup.whsp-anim-out           { animation: whsp-out .3s ease forwards; }

/* Icon */
.whsp-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(37,99,235,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  flex-shrink: 0;
  transition: background .3s;
}
.whsp-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

/* Content */
.whsp-content { flex: 1; min-width: 0; }
.whsp-name    { font-size: .875rem; font-weight: 700; color: #0F172A; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whsp-msg     { font-size: .8125rem; color: #475569; line-height: 1.4; margin-bottom: 3px; }
.whsp-time    { font-size: .6875rem; color: #94A3B8; display: flex; align-items: center; gap: 4px; }
.whsp-time::before { content: '🟢'; font-size: .5rem; }

/* Close button */
.whsp-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: .75rem;
  color: #CBD5E1;
  cursor: pointer;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .2s;
}
.whsp-close:hover { color: #64748B; }

/* Mobile */
@media(max-width:480px){
  .whsp-popup{ bottom:80px; max-width:calc(100vw - 32px); }
  .whsp-popup.whsp-left  { left: 16px; }
  .whsp-popup.whsp-right { right: 16px; }
}