.chatbot-btn {



  position: fixed;



  bottom: 20px;



  right: 20px;



  width: 65px;



  height: 65px;



  border-radius: 50%;



  background: #2563eb;



  color: white;



  font-size: 28px;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  z-index: 999999;



  box-shadow: 0 8px 20px rgba(0,0,0,.3);



}







.chatbot-box {



  position: fixed;



  bottom: 95px;



  right: 20px;



  width: 360px;



  height: 520px;



  background: white;



  border-radius: 18px;



  display: none;



  flex-direction: column;



  overflow: hidden;



  z-index: 999999;



  box-shadow: 0 0 25px rgba(0,0,0,.25);



}







.chatbot-header {



  padding: 15px;



  font-weight: bold;



  color: white;



}







.chatbot-body {



  flex: 1;



  padding: 12px;



  overflow-y: auto;



  background: #f9fafb;



}







.chatbot-input {



  border: none;



  border-top: 1px solid #ddd;



  padding: 15px;



  font-size: 15px;



  width: 100%;



  outline: none;



}







.msg {



  margin: 8px 0;



  padding: 10px 12px;



  border-radius: 14px;



  max-width: 85%;



  font-size: 14px;



}







.msg.user {



  margin-left: auto;



  background: #2563eb;



  color: white;



}







.msg.bot {



  background: white;



  border: 1px solid #ddd;



}







/* FULLSCREEN ON MOBILE */



@media (max-width: 768px) {



  .chatbot-box {



    width: 100%;



    height: 100%;



    bottom: 0;



    right: 0;



    border-radius: 0;



  }



}



.quick-questions {

  padding: 8px;

}

.quick-questions button {

  border-radius: 20px;

}





.chat-input-area {

  display: flex;

  gap: 8px;

  padding: 10px;

  border-top: 1px solid #ddd;

}



#chatInput {

  flex: 1;

  padding: 10px;

  border-radius: 8px;

  border: 1px solid #ccc;

}



#sendBtn {

  background: #2563eb;

  color: white;

  border: none;

  padding: 10px 14px;

  border-radius: 8px;

  cursor: pointer;

}



#sendBtn:hover {

  background: #1e40af;

}

#sendBtn:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}





.typing {

  display: flex;

  gap: 5px;

  padding: 8px 12px;

  background: #f1f1f1;

  border-radius: 12px;

  width: fit-content;

  margin: 6px 0;

}



.typing span {

  width: 8px;

  height: 8px;

  background: gray;

  border-radius: 50%;

  animation: bounce 1.2s infinite;

}



.typing span:nth-child(2) {

  animation-delay: 0.2s;

}



.typing span:nth-child(3) {

  animation-delay: 0.4s;

}



@keyframes bounce {

  0%, 80%, 100% {

    transform: translateY(0);

    opacity: 0.3;

  }

  40% {

    transform: translateY(-6px);

    opacity: 1;

  }

}