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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

:root {
  --chatbot-bg-color: #724ae8;
  /* Default background color */
}

/* body {
  background: #E3F2FD; 
} */

.chatbot-toggler {
  position: fixed;
  bottom: 30px;
  right: 35px;
  outline: none;
  border: none;
  height: 50px;
  width: 50px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--chatbot-bg-color);
  transition: all 0.2s ease;
}

body.show-chatbot .chatbot-toggler {
  transform: rotate(90deg);
}

.chatbot-toggler span {
  color: #fff;
  position: absolute;
}

.chatbot-toggler span:last-child,
body.show-chatbot .chatbot-toggler span:first-child {
  opacity: 0;
}

/* Notification badge on the chat toggle button */
.chatbot-toggler .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e54253;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Floating welcome message near chat icon */
.floating-message {
  position: fixed;
  bottom: 80px;
  right: 35px;
  max-width: 260px;
  background: #fff;
  border-radius: 10px;
  padding: 12px 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  display: none;
}

.floating-message.show {
  display: block;
}

.floating-message::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 40px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent;
}

.floating-message .message-content p {
  font-size: 0.85rem;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Close icon inside the floating welcome message. Positioned in the
 * top‑right corner of the bubble. Users can click this "×" to
 * dismiss the welcome message without triggering any further actions. */
.floating-message .floating-close {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.floating-message .floating-close:hover {
  color: #e54253;
}

/*
 * Rating widget styles
 * This section styles the feedback card that appears after a live chat ends.
 * It includes a title, star icons for rating, an optional note field,
 * and submit/skip buttons. Colors are chosen to match the chatbot theme.
 */
.rating-card {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  color: #333;
  font-size: 0.9rem;
}
.rating-title {
  font-weight: 600;
  margin-bottom: 6px;
}
.stars {
  display: inline-flex;
  gap: 6px;
  user-select: none;
  margin: 6px 0 8px;
}
.star {
  font-size: 20px;
  cursor: pointer;
  color: #ccc;
  transition: transform 0.08s ease;
}
.star.active {
  color: #f5a623;
}
.rating-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.rating-actions button {
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.85rem;
}
.rating-submit {
  background: var(--chatbot-bg-color);
  color: #fff;
}
.rating-skip {
  background: #eee;
  color: #333;
}
.rating-note {
  width: 100%;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.85rem;
  margin-top: 6px;
  resize: vertical;
  min-height: 60px;
}

/*
 * Star rating component using radio inputs and labels. This alternative
 * rating control hides the radio buttons and uses the sibling selector
 * to colour all stars to the left of the checked input. Hover styles
 * give users feedback before selection. These styles support the
 * .star-rating markup used in the rating widget implementation.
 */
.star-rating {
  display: inline-flex;
  direction: rtl;
  gap: 6px;
  user-select: none;
  margin: 6px 0 8px;
}
.star-rating input {
  display: none;
}
.star-rating label {
  font-size: 20px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.15s ease;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #f5a623;
}

.floating-button {
  background: #e54253;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}

body.show-chatbot .chatbot-toggler span:last-child {
  opacity: 1;
}

.chatbot {
  position: fixed;
  right: 35px;
  bottom: 90px;
  width: 420px;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.5);
  transform-origin: bottom right;
  box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1),
    0 32px 64px -48px rgba(0, 0, 0, 0.5);
  transition: all 0.1s ease;
}

body.show-chatbot .chatbot {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  border-radius: 10px;
}

.chatbot header {
  padding: 6px 0;
  position: relative;
  text-align: center;
  color: #fff;
  background: var(--chatbot-bg-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.chatbot header span {
  position: absolute;
  right: 15px;
  top: 50%;
  display: none;
  cursor: pointer;
  transform: translateY(-50%);
}

header h2 {
  font-size: 1.2rem;
}

.chatbot .chatbox {
  overflow-y: auto;
  height: 510px;
  padding: 30px 20px 100px;
}

.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
  width: 6px;
}

.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 25px;
}

.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}

.chatbox .chat {
  display: flex;
  list-style: none;
  /* Allow chat items like reaction rows to wrap onto a new line. Without
     flex-wrap, appended elements (such as the reaction row) would be
     forced to squeeze horizontally next to the avatar and message bubble,
     causing layout issues. */
  flex-wrap: wrap;
}

.chatbox .outgoing {
  margin: 20px 0;
  justify-content: flex-end;
}

.chatbox .incoming span {
  width: 32px;
  height: 32px;
  color: #fff;
  cursor: default;
  text-align: center;
  line-height: 32px;
  align-self: flex-end;
  background: var(--chatbot-bg-color);
  border-radius: 4px;
  /* margin: 0 10px 7px 0; */
  margin: 0 10px 0 0;
}
.chatbox .chat.incoming span{
  margin-right: 5px;
}

.chatbox .chat p {
  /* white-space: pre-wrap; */
  padding: 12px 12px;
  border-radius: 10px 10px 0 10px;
  max-width: 90%;
  color: #fff;
  font-size: 0.92rem;
  background: var(--chatbot-bg-color);
}

.chatbox .incoming p {
  border-radius: 10px 10px 10px 0;
}

.chatbox .chat p.error {
  color: #721c24;
  background: #f8d7da;
}

.chatbox .incoming p {
  color: #000;
  background: #f2f2f2;
}
.chatbox .chat.incoming p {
    margin-top: 10px;
}

.chatbot .chat-input {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 3px 20px;
  border-top: 1px solid #ddd;
}

.chat-input textarea {
  height: 55px;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  max-height: 180px;
  padding: 15px 15px 15px 0;
  font-size: 0.95rem;
}

.chat-input span {
  align-self: flex-end;
  color: var(--chatbot-bg-color);
  cursor: pointer;
  height: 55px;
  display: flex;
  align-items: center;
  visibility: hidden;
  font-size: 1.35rem;
}

.chat-input textarea:valid~span {
  visibility: visible;
}

@media (max-width: 490px) {
  .chatbot-toggler {
    right: 20px;
    bottom: 0;
  }

  .chatbot {
    right: 0;
    bottom: 55px;
    height: 86%;
    border-radius: 0;
    width: 85%;
  }

  .chatbot .chatbox {
    height: 90%;
    padding: 25px 15px 100px;
  }

  .chatbot .chat-input {
    padding: 5px 15px;
  }

  .chatbot header span {
    display: block;
  }
}


p:has(.live-chat-info-form) {
  display: contents;
}


/* css for loader */
.messenger-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 20px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--chatbot-bg-color);
  ;
  margin: 0 3px;
  animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-8px);
  }
}


/* Static buttons container */
.static-buttons-container {
    padding: 10px 20px;
    bottom: 50px;
    position: absolute;
    right: 0;
}

/* Button grid */
.static-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* Button style */
.static-button {
  padding: 8px 12px;
  border-radius: 10px;
  background: #e54253;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

/* Welcome message buttons */
.static-buttons-welcome {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.static-buttons-welcome .static-button {
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f8f8f8;
  border: 1px solid #e0e0e0;
}

/*
 * Custom confirmation dialog styles. This overlay covers the entire
 * viewport and centers the confirmation box. The box itself is styled
 * to blend with the chatbot aesthetics. Buttons inside the dialog
 * provide confirm and cancel actions.
 */
.confirm-overlay {
  position: fixed;
  top: 0;
  left: 30px;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.5); */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.confirm-box {
  background: #fff;
  padding: 20px 25px;
  border-radius: 10px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.confirm-box p {
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: #333;
}

.confirm-btn-container {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.confirm-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

.confirm-btn.confirm-yes {
  background: var(--chatbot-bg-color);
  color: #fff;
}

.confirm-btn.confirm-no {
  background: #e0e0e0;
  color: #333;
}

.welcome-message {
  display: flex;
  flex-direction: column;
  width: 90%;
}
.welcome-message ul {
  padding-left: 10px;
  list-style: disc;

}

.welcome-message ol {
  padding-left: 15px;
  
}

.static-buttons-welcome {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.static-buttons-welcome .static-button {
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f8f8f8;
  color: #333;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.user-query-form-container-inner {
  width: 100%;
  max-width: 500px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.user-query-form-container-inner form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 185px;
  margin-top: 20px;
  margin-bottom: 25px;
}

.live-chat-info-form-inner {
  font-size: 15px;
  font-weight: bold;
  text-align: left;
}

/* Add these styles */
.static-button:disabled {
  background: #e0e0e0 !important;
  color: #a0a0a0 !important;
  border-color: #d0d0d0 !important;
  cursor: not-allowed !important;
  transition: all 0.3s ease;
}

.button-container {
  display: flex;
  justify-content: space-between;
}

.submit-btn, .cancel-btn {
  padding: 10px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width: 48%;
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn {
  background-color: var(--chatbot-bg-color); /* Green */
}

.cancel-btn {
  background-color: #f44336; /* Red */
}

.submit-btn:hover {
  background-color:  var(--chatbot-bg-color); /* Darker green */
  transform: scale(1.05); /* Slight zoom effect */
}

.cancel-btn:hover {
  background-color: #e53935; /* Darker red */
  transform: scale(1.05); /* Slight zoom effect */
}

/* Add some spacing between the icon and text */
.submit-btn i, .cancel-btn i {
  margin-right: 8px;
}


/* Clear history button */
.clear-history {
  position: absolute;
  top: 5px;
  right: 10px;
  background: #ff4444;
  color: white;
  border: none;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
}

/* Reaction buttons container holds the thumbs icons. */
.reaction-buttons {
  display: flex;
  gap: 6px;
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.reaction-buttons i {
  cursor: pointer;
  transition: color 0.2s ease;
}

.reaction-buttons i.active {
  color: var(--chatbot-bg-color);
}

/* Positioning of reaction buttons relative to the message type. Incoming
   reactions sit under the avatar column (no extra margin), while
   outgoing reactions are pushed to the right by using an auto margin. */
.chat.incoming .reaction-buttons {
  margin-left: 0;
}

.chat.outgoing .reaction-buttons {
  margin-left: auto;
  margin-right: 0;
}

/* A row for reactions, which includes a cloned avatar icon and the
   reaction buttons. The flex-basis ensures it wraps onto a new line
   under the message bubble. */
.reaction-row {
  display: flex;
  flex-basis: 100%;
  align-items: flex-start;
  margin-top: 4px;
}

/* Style the cloned avatar in the reaction row similarly to the main
   chat avatar. We apply a fixed size, background colour and border
   radius so it matches the look of the assistant icon. */
/* The reaction row is offset for incoming messages so that the thumbs
   icons align under the message bubble rather than directly under
   the avatar. We compute the left margin as the avatar width (32px)
   plus the horizontal spacing between the avatar and the bubble (5px). */
.chat.incoming .reaction-row {
  margin-left: calc(32px + 5px);
}

a{
  color: var(--chatbot-bg-color);
}