/* Update the chat button */
.chat-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px; /* Make it a perfect circle */
  height: 60px;
  background-color: #5a54e9; /* A modern, vibrant color */
  color: white;
  border-radius: 50%; /* Creates the circular shape */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px; /* Larger icon */
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover transition */
  z-index: 1000;
}

/* Hover effect */
.chat-toggle:hover {
  transform: translateY(-5px); /* Moves the button up slightly */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* Deeper shadow on hover */
}

/* Update the chat container */
.chat-container {
  position: fixed;
  bottom: 90px; /* Adjust based on the new button size */
  right: 20px;
  width: 400px; /* Slightly narrower, more elegant */
  height: 550px;
  background: white;
  border-radius: 20px; /* More rounded corners */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); /* A more pronounced, modern shadow */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1000;

  /* Add animation properties */
  transform: translateY(100px) scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* State for when the chatbox is open */
.chat-container.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

/* Style the close button */
.chat-close {
  position: absolute;
  top: 15px; /* Adjust position */
  right: 20px;
  background: none;
  border: none;
  font-size: 22px; /* Larger and easier to click */
  color: #888; /* A softer gray color */
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 1001;
}

.chat-close:hover {
  color: #333; /* Darker on hover */
}