.popup-toast {
  position: fixed;
  bottom: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
}

.popup-bar {
  background-color: #fff;
  color: #000;
  border-radius: 30px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: clamp(12px, 2vw, 15px);
  font-weight: 600;
  min-height: 50px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  max-width: 600px;
  width: 90%;
  pointer-events: auto;
}

.popup-icon {
  width: clamp(30px, 5vw, 40px);
  height: clamp(30px, 5vw, 40px);
  object-fit: contain;
  flex-shrink: 0;
}

.popup-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
}

.popup-text {
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}

.popup-status {
  font-size: 12px;
  font-weight: 500;
  color: green;
  text-transform: uppercase;
  margin-top: 3px;
}

@keyframes slideUp {
  from { transform: translateY(0); opacity: 0; }
  to   { transform: translateY(100%); opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateY(100%); opacity: 1; }
  to   { transform: translateY(0); opacity: 0; }
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out forwards;
}
.animate-slide-down {
  animation: slideDown 0.4s ease-in forwards;
}
/* ==== CHAT POPUP STYLE ==== */
.chat-popup {
  position: fixed;
  bottom: 70px;
  left: 87%;
  transform: translateX(-50%);
  z-index: 9999;
  display: none; /* awalnya hidden */
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ICON STYLE */
.chat-popup .chat-item img {
  width: 55px;
  height: 55px;
  border-radius: 14px;
  transition: transform 0.3s ease;
}

.chat-popup .chat-item img:hover {
  transform: scale(1.1);
}

/* ==== SLIDE ANIMATION ==== */
.chat-popup.slide-up {
  display: flex;
  animation: slideUpAnim 0.3s ease-out forwards;
}

.chat-popup.slide-down {
  animation: slideDownAnim 0.3s ease-in forwards;
}

/* === KEYFRAMES === */
@keyframes slideUpAnim {
  from {
    opacity: 1;
    transform: translate(-50%, 40px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes slideDownAnim {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 40px);
  }
}