/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Global style reset and font setting */
* {
  margin: 0; /* Reset margin */
  padding: 0; /* Reset padding */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  font-family: "Poppins", sans-serif; /* Set global font to Poppins */
}

/* Set background color for the body */
body {
  background: #E3F2FD; /* Light blue background color */
}

/* Style for the chatbot toggle button */
.chatbot-toggler {
  position: fixed; /* Fixed position */
  bottom: 30px; /* 30px from the bottom */
  right: 35px; /* 35px from the right */
  outline: none; /* Remove outline */
  border: none; /* Remove border */
  height: 50px; /* Set height to 50px */
  width: 50px; /* Set width to 50px */
  display: flex; /* Use flexbox layout */
  cursor: pointer; /* Pointer cursor on hover */
  align-items: center; /* Center align items vertically */
  justify-content: center; /* Center align items horizontally */
  border-radius: 50%; /* Round shape */
  background: #724ae8; /* Purple background color */
  transition: all 0.2s ease; /* Smooth transition */
}

/* Rotate the toggle button when the chatbot is displayed */
body.show-chatbot .chatbot-toggler {
  transform: rotate(90deg); /* Rotate 90 degrees */
}

/* Style icons inside the toggle button */
.chatbot-toggler span {
  color: #fff; /* White color */
  position: absolute; /* Absolute positioning */
}

/* Hide the close icon initially */
.chatbot-toggler span:last-child,
body.show-chatbot .chatbot-toggler span:first-child {
  opacity: 0; /* Set opacity to 0 */
}

/* Show the close icon when the chatbot is displayed */
body.show-chatbot .chatbot-toggler span:last-child {
  opacity: 1; /* Set opacity to 1 */
}

/* Style the chatbot window */
.chatbot {
  position: fixed; /* Fixed position */
  right: 35px; /* 35px from the right */
  bottom: 90px; /* 90px from the bottom */
  width: 420px; /* Set width to 420px */
  background: #fff; /* White background color */
  border-radius: 15px; /* Rounded corners */
  overflow: hidden; /* Hide overflow */
  opacity: 0; /* Initially invisible */
  pointer-events: none; /* Disable pointer events */
  transform: scale(0.5); /* Scale down */
  transform-origin: bottom right; /* Transform origin */
  box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
              0 32px 64px -48px rgba(0,0,0,0.5); /* Box shadow */
  transition: all 0.1s ease; /* Smooth transition */
}

/* Show the chatbot window when active */
body.show-chatbot .chatbot {
  opacity: 1; /* Set opacity to 1 */
  pointer-events: auto; /* Enable pointer events */
  transform: scale(1); /* Scale to normal size */
}

/* Style the chatbot header */
.chatbot header {
  padding: 16px 0; /* Vertical padding */
  position: relative; /* Relative positioning */
  text-align: center; /* Center align text */
  color: #fff; /* White text color */
  background: #724ae8; /* Purple background color */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Box shadow */
}

/* Position and hide the close button in the header */
.chatbot header span {
  position: absolute; /* Absolute positioning */
  right: 15px; /* 15px from the right */
  top: 50%; /* Center vertically */
  display: none; /* Hide element */
  cursor: pointer; /* Pointer cursor on hover */
  transform: translateY(-50%); /* Align vertically */
}

/* Style the header title */
header h2 {
  font-size: 1.4rem; /* Font size */
}

/* Style the chatbox area */
.chatbot .chatbox {
  overflow-y: auto; /* Enable vertical scrolling */
  height: 510px; /* Set height */
  padding: 30px 20px 100px; /* Padding */
}

/* Customize scrollbar for chatbox and textarea */
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
  width: 6px; /* Set scrollbar width */
}

/* Customize scrollbar track */
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
  background: #fff; /* White background */
  border-radius: 25px; /* Rounded corners */
}

/* Customize scrollbar thumb */
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
  background: #ccc; /* Grey color */
  border-radius: 25px; /* Rounded corners */
}

/* Style each chat message */
.chatbox .chat {
  display: flex; /* Use flexbox layout */
  align-items: flex-start; /* Align items at the start */
  list-style: none; /* Remove list style */
  margin-bottom: 20px; /* Bottom margin */
}

/* Style outgoing messages */
.chatbox .outgoing {
  justify-content: flex-end; /* Align to the end */
  flex-direction: column; /* Column direction */
  align-items: flex-end; /* Align items at the end */
}

/* Style incoming messages */
.chatbox .incoming {
  display: flex; /* Use flexbox layout */
  align-items: flex-start; /* Align items at the start */
}

/* Style icon for incoming messages */
.chatbox .incoming span {
  width: 32px; /* Set width */
  height: 32px; /* Set height */
  color: #fff; /* White color */
  cursor: default; /* Default cursor */
  text-align: center; /* Center align text */
  line-height: 32px; /* Center align text vertically */
  background: #724ae8; /* Purple background color */
  border-radius: 4px; /* Rounded corners */
  margin-right: 10px; /* Right margin */
}

/* Style the message bubbles */
.chatbox .chat p {
  white-space: pre-wrap; /* Preserve white space */
  padding: 12px 16px; /* Padding */
  border-radius: 10px 10px 0 10px; /* Rounded corners */
  max-width: 75%; /* Max width */
  color: #fff; /* White text color */
  font-size: 0.75rem; /* Font size */
  background: #724ae8; /* Purple background color */
  margin: 0; /* Reset margin */
}

/* Style incoming message bubbles */
.chatbox .incoming p {
  border-radius: 10px 10px 10px 0; /* Rounded corners */
  color: #000; /* Black text color */
  background: #f2f2f2; /* Light grey background color */
}

/* Style error messages */
.chatbox .chat p.error {
  color: #721c24; /* Error text color */
  background: #f8d7da; /* Error background color */
}

/* Style the chat input area */
.chatbot .chat-input {
  display: flex; /* Use flexbox layout */
  gap: 5px; /* Space between items */
  position: absolute; /* Absolute positioning */
  bottom: 0; /* Position at the bottom */
  width: 100%; /* Full width */
  background: #fff; /* White background */
  padding: 3px 20px; /* Padding */
  border-top: 1px solid #ddd; /* Top border */
}

/* Style the textarea in the input area */
.chat-input textarea {
  height: 55px; /* Set height */
  width: 100%; /* Full width */
  border: none; /* Remove border */
  outline: none; /* Remove outline */
  resize: none; /* Disable resizing */
  max-height: 180px; /* Max height */
  padding: 15px 15px 15px 0; /* Padding */
  font-size: 0.75rem; /* Font size */
}

/* Style the send button */
.chat-input span {
  align-self: flex-end; /* Align at the end */
  color: #724ae8; /* Purple color */
  cursor: pointer; /* Pointer cursor on hover */
  height: 55px; /* Set height */
  display: flex; /* Use flexbox layout */
  align-items: center; /* Center align items vertically */
  visibility: hidden; /* Initially hidden */
  font-size: 1.35rem; /* Font size */
}

/* Show the send button when textarea has valid input */
.chat-input textarea:valid ~ span {
  visibility: visible; /* Set visibility to visible */
}

/* Style the typing animation dots */
.dots {
  display: inline-block; /* Inline block layout */
  position: relative; /* Relative positioning */
  width: 24px; /* Set width */
  height: 16px; /* Set height */
}

/* Style each dot in the typing animation */
.dots div {
  position: absolute; /* Absolute positioning */
  top: 0; /* Position at the top */
  width: 6px; /* Set width */
  height: 6px; /* Set height */
  border-radius: 50%; /* Rounded shape */
  background: #000; /* Black color */
  animation-timing-function: cubic-bezier(0, 1, 1, 0); /* Animation timing function */
}

/* Position and animate the first dot */
.dots div:nth-child(1) {
  left: 0; /* Position on the left */
  animation: dots1 0.6s infinite; /* Infinite animation */
}

/* Position and animate the second dot */
.dots div:nth-child(2) {
  left: 8px; /* Position 8px from the left */
  animation: dots2 0.6s infinite; /* Infinite animation */
}

/* Position and animate the third dot */
.dots div:nth-child(3) {
  left: 16px; /* Position 16px from the left */
  animation: dots2 0.6s infinite; /* Infinite animation */
}

/* Position and animate the fourth dot */
.dots div:nth-child(4) {
  left: 24px; /* Position 24px from the left */
  animation: dots3 0.6s infinite; /* Infinite animation */
}

/* Define keyframes for the first dot animation */
@keyframes dots1 {
  0% {
    transform: scale(0); /* Scale down */
  }
  100% {
    transform: scale(1); /* Scale up */
  }
}

/* Define keyframes for the second dot animation */
@keyframes dots2 {
  0% {
    transform: scale(1); /* Scale up */
  }
  100% {
    transform: scale(0); /* Scale down */
  }
}

/* Define keyframes for the third dot animation */
@keyframes dots3 {
  0% {
    transform: scale(0); /* Scale down */
  }
  100% {
    transform: scale(1); /* Scale up */
  }
}

/* Media query for small screens */
@media (max-width: 490px) {
  .chatbot-toggler {
    right: 20px; /* 20px from the right */
    bottom: 20px; /* 20px from the bottom */
  }
  .chatbot {
    right: 0; /* Position at the right edge */
    bottom: 0; /* Position at the bottom edge */
    height: 100%; /* Full height */
    border-radius: 0; /* Remove border radius */
    width: 100%; /* Full width */
  }
  .chatbot .chatbox {
    height: 90%; /* Set height */
    padding: 25px 15px 100px; /* Padding */
  }
  .chatbot .chat-input {
    padding: 5px 15px; /* Padding */
  }
  .chatbot header span {
    display: block; /* Display close button */
  }
}

.chatbox .chat .timestamp {
  display: block;
  font-size: 0.7rem;
  color: #888;
  margin-top: 5px;
}

/* Resetting padding and margin for labels */
.chatbox label {
  display: block;
  text-align: left;
  margin: 0; /* No margin for top, right, bottom, and left */
  padding: 0; /* No padding for top, right, bottom, and left */
}

/* pull  labels closer together using negative margin */
.chatbox label {
  display: block;
  margin-bottom: -10px;  /* Pulls labels closer by overlapping them slightly */
}

.chatbox input[type="radio"] {
  margin-right: 5px; /* adds a small space between the radio button and the label text */
}