/* --- CÁC STYLE CHUNG --- */
#chatbot-button {
  position: fixed;
  bottom: 5px;
  left: 10px;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 9999;
  cursor: pointer;
  padding: 0;
  transition: width 0.3s, height 0.3s; /* Thêm hiệu ứng chuyển động mượt mà */
}

#chatbot-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#iframe-container {
  position: fixed;
  bottom: 60px;
  left: 20px;
  width: 380px;
  height: 550px;
  display: none;
  z-index: 9998;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  transition: all 0.3s; /* Thêm hiệu ứng chuyển động mượt mà */
}

#chatbot-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}

#close-iframe-button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
#close-iframe-button:hover {
    background-color: rgba(255, 0, 0, 0.7);
}

#chatbot-greeting {
  position: fixed;
  bottom: 40px;
  left: -400px;
  background-color: #003366;
  color: white;
  padding: 12px 20px;
  border-radius: 16px;
  font-size: 14px;
  z-index: 9997;
  display: none;
  white-space: nowrap;
  box-shadow: 0 0 15px 5px rgba(255, 255, 0, 0.7);
  /* Animation mặc định cho desktop */
  animation: slideInAndOutDesktop 12s ease-out forwards;
}

/* Animation cho Desktop */
@keyframes slideInAndOutDesktop {
  0% { left: -400px; opacity: 0; }
  10% { left: 110px; opacity: 1; }
  90% { left: 110px; opacity: 1; }
  100% { left: -400px; opacity: 0; }
}

#greeting-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid white;
  vertical-align: middle;
  animation: typing 3.5s steps(45, end) 1s forwards, blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white; }
}

#greeting-text.finished {
  border-right-color: transparent;
  animation: none;
}

#close-greeting {
  position: absolute;
  top: 2px;
  right: 5px;
  background: transparent;
  border: none;
  color: #FFBABA;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* --- CSS CHO THIẾT BỊ DI ĐỘNG (RESPONSIVE) --- */
/* Áp dụng các style này khi chiều rộng màn hình từ 600px trở xuống */
@media (max-width: 600px) {
  
  /* 1. Thu nhỏ nút chatbot lại cho gọn */
  #chatbot-button {
    width: 80px;
    height: 80px;
  }

  /* 2. Cho ô chat chiếm gần hết màn hình và căn giữa */
  #iframe-container {
    width: 95vw; /* Rộng bằng 95% chiều rộng màn hình */
    height: 80vh; /* Cao bằng 80% chiều cao màn hình */
    left: 2.5vw; /* Căn giữa theo chiều ngang */
    bottom: 90px; /* Nâng lên trên nút chat đã thu nhỏ */
  }

  /* 3. Đặt lại vị trí và animation cho lời chào */
  #chatbot-greeting {
    /* Ghi đè animation cũ và dùng animation mới cho mobile */
    animation: slideInAndOutMobile 12s ease-out forwards;
  }

  /* Animation mới cho Mobile, trượt vào từ bên trái màn hình */
  @keyframes slideInAndOutMobile {
    0% { left: -100%; opacity: 0; }
    10% { left: 10px; opacity: 1; } /* Vị trí mới cách lề trái 10px */
    90% { left: 10px; opacity: 1; }
    100% { left: -100%; opacity: 0; }
  }
}