/* Custom styling for chatbot conversation area */
.vg-chat--current-convo {
  background-color: white !important;
}

/* Alternative selector if the above doesn't work */
#vG_OVERLAY_CONTAINER .vg-flex.vg-flex-col.vg-gap-5.vg-pt-\[20px\].vg-pb-\[50px\].vg-chat--current-convo {
  background-color: white !important;
}

/* Convert chatbot header text to black color */
.vg-chat-header--inner {
  color: black !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* More specific selector for the header text */
.vg-chat-header--container .vg-chat-header--inner {
  color: black !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Target all text elements within the header */
.vg-chat-header--inner * {
  color: black !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Alternative selector using the full CSS path */
#VG_OVERLAY_CONTAINER .vg-chat-header--container .vg-text-center.vg-chat-header--inner {
  color: black !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* Change chatbot message background to brand pink #DDA09C */
.vg-message-inner-container-bot {
  background-color: #DDA09C !important;
  border-radius: 8px !important;
}

/* More specific selector for the bot message container */
.vg-bg-content2.vg-message-inner-container-bot {
  background-color: #DDA09C !important;
  border-radius: 8px !important;
}

/* Alternative selector using the full CSS path */
#VG_OVERLAY_CONTAINER .vg-message-container-bot .vg-message-inner-container-bot {
  background-color: #DDA09C !important;
  border-radius: 8px !important;
}

/* Most specific selector targeting the exact element */
.vg-transition-all.vg-duration-300.vg-ease-in-out.vg-opacity-100.vg-group.vg-relative.vg-text-medium.vg-h-auto.vg-flex.vg-gap-2.vg-bg-content2.vg-p-1.vg-max-w-\[75\%\].vg-rounded-tl-large.vg-rounded-bl-\[5px\].vg-rounded-tr-large.vg-rounded-br-large.vg-max-w-\[500px\].vg-message-inner-container-bot {
  background-color: #DDA09C !important;
  border-radius: 8px !important;
}

/* Additional selector based on the inspected element structure */
.vg-message-text-bot.vg-text-message-container {
  background-color: inherit !important;
}

/* Change chatbot button background color to brand pink #DDA09C */
.vg-buttons-message--btn {
  background-color: #DDA09C !important;
  border-radius: 8px !important;
}

/* More specific selector for chatbot action buttons */
.vg-action-btn.vg-buttons-message--btn {
  background-color: #DDA09C !important;
  border-radius: 8px !important;
}

/* Target the button with all its classes */
.vg-bg-primary-50.vg-buttons-message--btn {
  background-color: #DDA09C !important;
  border-radius: 8px !important;
}

/* Override hover state to maintain consistent color */
.vg-buttons-message--btn:hover,
.vg-action-btn:hover,
.vg-bg-primary-50:hover {
  background-color: #DDA09C !important;
  opacity: 0.9 !important;
}

/* Most specific selector based on the inspected element */
#VG_OVERLAY_CONTAINER .vg-buttons-message--btn.vg-action-btn {
  background-color: #DDA09C !important;
  border-radius: 8px !important;
}

/* Additional hover state override */
#VG_OVERLAY_CONTAINER .vg-buttons-message--btn.vg-action-btn:hover {
  background-color: #DDA09C !important;
  opacity: 0.9 !important;
}

/* Target buttons within the button container */
.vg-btns-container button {
  background-color: #DDA09C !important;
  border-radius: 8px !important;
}

/* Override any hover effects on buttons */
.vg-btns-container button:hover {
  background-color: #DDA09C !important;
  opacity: 0.9 !important;
}

/* Style the chatbot launcher button with sage green */
.vg-launcher-button,
.vg-chat-launcher,
.vg-launcher {
  background-color: #5A7A5A !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(90, 122, 90, 0.3) !important;
}

/* Ensure launcher button icon is white */
.vg-launcher-button svg,
.vg-chat-launcher svg,
.vg-launcher svg {
  color: white !important;
  fill: white !important;
}

/* Style the main chat container */
.vg-chat-container,
.vg-chat-widget {
  border-radius: 8px !important;
  font-family: 'Open Sans', sans-serif !important;
}

/* Apply consistent typography to chat messages */
.vg-message-text,
.vg-message-text-bot,
.vg-message-text-user {
  font-family: 'Open Sans', sans-serif !important;
}

/* Style user message bubbles */
.vg-message-inner-container-user {
  border-radius: 8px !important;
}

/* Apply consistent corner radius to all chat elements */
.vg-chat-header,
.vg-chat-footer,
.vg-input-container {
  border-radius: 8px !important;
}

/* Replace chatbot avatar with website logo */
.vg-w-10.vg-h-10.vg-rounded-full {
  background-image: url('/ChatGPT Image Jun 28, 2025, 12_53_06 AM.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: white !important;
  border: 1px solid rgba(74,107,80,0.2) !important;
}

/* Hide the original avatar image */
.vg-w-10.vg-h-10.vg-rounded-full img {
  opacity: 0 !important;
}

/* Alternative more specific selector for avatar replacement */
#VG_OVERLAY_CONTAINER .vg-chat-header--container .vg-w-10.vg-h-10.vg-rounded-full {
  background-image: url('/ChatGPT Image Jun 28, 2025, 12_53_06 AM.png') !important;
  background-size: 80% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: white !important;
  border: 1px solid rgba(74,107,80,0.2) !important;
}

/* Hide original avatar image with more specificity */
#VG_OVERLAY_CONTAINER .vg-chat-header--container .vg-w-10.vg-h-10.vg-rounded-full img {
  opacity: 0 !important;
  visibility: hidden !important;
}