@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

#chatWidgetRoot {
  position: fixed !important;
  right: 20px !important;
  left: auto !important;
  bottom: 100px !important;
  top: auto !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
}

/* === POPUP POSITIONING - DISESUAIKAN AGAR TIDAK TERLALU TINGGI === */
#chatWidgetRoot #chatPopup {
  position: absolute !important;
  bottom: 0 !important; /* Popup mulai dari dasar root */
  right: 0 !important;
  z-index: 999999 !important;
  transform-origin: bottom right;
  margin-bottom: 5px !important; /* Jarak dari tombol FAB (70px tombol + 5px spacer) */
  display: none;
  width: 340px;
}

/* Container dalam popup */
#chatWidgetRoot #chatPopup > div {
  height: 480px !important;
  max-height: 480px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Chat body - area scrollable */
#chatBody {
  flex: 1;
  overflow-y: auto !important;
  max-height: 320px !important; /* 480px total - 80px header - 80px input */
  padding: 16px;
  background: #f9fafb;
}

/* Custom scrollbar untuk chat body */
#chatBody::-webkit-scrollbar { width: 6px; }
#chatBody::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
#chatBody::-webkit-scrollbar-thumb {
  background: var(--akademis-accent, #016e8d);
  border-radius: 10px;
}
#chatBody::-webkit-scrollbar-thumb:hover {
  background: #015a73;
}

#chatWidgetRoot #chatPopup.show {
  display: block !important;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 768px) {
  #chatWidgetRoot { 
    bottom: 140px !important; 
    right: 15px !important; 
  }

  #chatWidgetRoot #chatPopup {
    width: calc(100vw - 30px) !important;
    max-width: 400px !important;
    bottom: 0 !important;
    margin-bottom: 70px !important; /* Jarak dari tombol di mobile */
  }

  #chatWidgetRoot #chatPopup > div {
    height: calc(100vh - 280px) !important;
    max-height: 500px !important;
    min-height: 400px !important;
  }
  
  #chatBody {
    max-height: calc(100vh - 380px) !important;
  }
}

/* === DESKTOP === */
@media (min-width: 769px) {
  #chatWidgetRoot #chatPopup > div { 
    height: 480px !important;
    max-height: 480px !important;
  }
  
  #chatBody {
    max-height: 320px !important;
  }
}