/* =========================
   FLOATING LIVE CHAT
========================= */
.download-page #chat-box{
  position:fixed;
  bottom:90px;
  right:20px;
  width:320px;
  height:420px;
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  display:none;
  flex-direction:column;
  z-index:99999;
  overflow:hidden;
  font-family:system-ui, sans-serif;
}

/* header */
.download-page #chat-box::before{
  content:"💬 Live Chat";
  background:#2563eb;
  color:#fff;
  padding:14px;
  font-weight:700;
  text-align:center;
  display:block;
}

/* area pesan */
.download-page #messages{
  flex:1;
  padding:12px;
  overflow-y:auto;
  background:#f1f5f9;
}

/* bubble user */
.download-page .msg-user{
  background:#dcf8c6;
  padding:8px 12px;
  border-radius:12px;
  margin-bottom:8px;
  max-width:80%;
  align-self:flex-end;
}

/* input area */
.download-page .chat-input{
  display:flex;
  border-top:1px solid #e5e7eb;
}

.download-page .chat-input input{
  flex:1;
  border:none;
  padding:12px;
  outline:none;
}

.download-page .chat-input button{
  border:none;
  background:#22c55e;
  color:#fff;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
}

.download-page .chat-input button:hover{
  background:#16a34a;
}

/* =========================
   WHATSAPP BUBBLE
========================= */
.download-page #wa-bubble{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  box-shadow:0 12px 30px rgba(0,0,0,.3);
  cursor:pointer;
  z-index:100000;
  background:url("https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg")
             center/28px no-repeat;
  transition:transform .25s ease;
}

.download-page #wa-bubble:hover{
  transform:scale(1.1);
}

/* ===== MOBILE ===== */
@media(max-width:420px){
  .download-page #chat-box{
    width:calc(100% - 40px);
    left:20px;
    right:20px;
  }
}
.msg-admin{
  background:#c7d2fe;
  align-self:flex-end;
}
/* USER MESSAGE */
.msg-user{
  background:#dcf8c6;
  padding:10px 14px;
  border-radius:14px;
  margin-bottom:10px;
  max-width:80%;
  align-self:flex-end;
}

/* ADMIN MESSAGE */
.msg-admin{
  background:#2563eb;   /* 🔵 BIRU */
  color:#ffffff;
  padding:10px 14px;
  border-radius:14px;
  margin-bottom:10px;
  max-width:80%;
  align-self:flex-start;
}