.chatbot-button {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0;
  position: fixed;
  z-index: 3;
  bottom: 1rem; /* Tailwind's bottom-4 */
  right: 1rem; /* Tailwind's right-4 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem; /* Tailwind's text-sm */
  font-weight: 500; /* Tailwind's font-medium */
  pointer-events: auto; /* Default state */
  opacity: 1; /* Default state */
  border: 1px solid #d1d5db; /* Tailwind's border-gray-200 */
  border-radius: 9999px; /* Tailwind's rounded-full */
  width: 4rem; /* Tailwind's w-16 */
  height: 4rem; /* Tailwind's h-16 */
  background-color: #000; /* Tailwind's bg-black */
  cursor: pointer;
  margin: 0; /* Tailwind's m-0 */
  padding: 0; /* Tailwind's p-0 */
  line-height: 1.25; /* Tailwind's leading-5 */
  transition: background-color 0.3s ease, color 0.3s ease; /* For hover effect */
}

/* Hover State */
.chatbot-button:hover {
  background-color: #374151; /* Tailwind's hover:bg-gray-700 */
  color: #111827; /* Tailwind's hover:text-gray-900 */
}

/* Disabled State */
.chatbot-button:disabled {
  pointer-events: none; /* Disable pointer events */
  opacity: 0.5; /* Tailwind's disabled:opacity-50 */
}

.chatbot-container {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0;
  position: fixed;
  z-index: 3;
  bottom: calc(4rem + 1.5rem); /* Tailwind's bottom-[calc(4rem+1.5rem)] */
  right: 0; /* Tailwind's right-0 */
  margin-right: 1rem; /* Tailwind's mr-4 */
  margin-left: 1rem;
  background-color: white; /* Tailwind's bg-white */
  padding: 1.5rem; /* Tailwind's p-6 */
  border-radius: 0.5rem; /* Tailwind's rounded-lg */
  border: 1px solid #e5e7eb; /* Tailwind's border-[#e5e7eb] */
  transform: translateX(500px); /* Tailwind's transform translate-x-[500px] */
  transition: transform 0.3s ease-in-out; /* Tailwind's transition-transform, duration-500, ease-in-out */
}

.chatbot-visible {
  transform: translateX(0);
}
.heading {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0;
  display: flex; /* flex */
  flex-direction: column; /* flex-col */
  gap: 0.375rem; /* space-y-1.5 (1.5 * 0.25rem = 0.375rem gap between items) */
  padding-bottom: 1.5rem;
  border-bottom: 1px solid; /* pb-6 (6 * 0.25rem = 1.5rem padding at the bottom) */
}
.chatbot-title {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0;
  font-weight: 600; /* font-semibold */
  font-size: 1.125rem; /* text-lg */
  letter-spacing: -0.015em; /* tracking-tight */
}

.chatbot-subtitle {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0;
  font-size: 0.875rem; /* text-sm */
  color: #6b7280; /* text-[#6b7280] */
  line-height: 0.75rem; /* leading-3 */
}
.custom-input {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0;
  display: flex;
  height: 2.5rem; /* h-10 */
  width: 100%; /* w-full */
  border-radius: 0.375rem; /* rounded-md */
  border: 1px solid #e5e7eb; /* border border-[#e5e7eb] */
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  font-size: 0.875rem; /* text-sm */
  color: #030712; /* text-[#030712] */
  outline: none; /* focus:outline-none */
}

.custom-input::placeholder {
  color: #6b7280; /* placeholder-[#6b7280] */
}

.custom-input:focus {
  border-color: #9ca3af; /* Change border color on focus */
  box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.5); /* Simulate ring effect */
}

.custom-input:disabled {
  cursor: not-allowed; /* disabled:cursor-not-allowed */
  opacity: 0.5; /* disabled:opacity-50 */
}
.custom-button {
  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  margin: 0;
  display: inline-flex;
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  color: #f9fafb; /* text-[#f9fafb] */
  background-color: #000; /* bg-black */
  height: 2.5rem; /* h-10 */
  padding: 0.5rem 1rem; /* px-4 py-2 */
  transition: background-color 0.2s; /* Smooth transition for hover effect */
}

.custom-button:hover {
  background-color: rgba(17, 24, 39, 0.9);
  cursor: pointer; /* hover:bg-[#111827E6] */
}

.custom-button:disabled {
  pointer-events: none; /* disabled:pointer-events-none */
  opacity: 0.5; /* disabled:opacity-50 */
}
.loadingtext p {
  color: limegreen;
  position: relative;
  margin: 0;
}

.loadingtext p::after {
  position: absolute;
  animation: b 3s infinite linear;
  color: limegreen;
  content: '';
}

@keyframes b {
  0% {
    content: '';
  }

  10% {
    content: '.';
  }

  40% {
    content: '..';
  }

  70% {
    content: '...';
  }

  100% {
    content: '';
  }
}
.custom-container {
  margin-bottom: 1rem;
  padding-right: 10px; /* Always leave space for the scrollbar */
  height: 270px;
  min-width: 100%;
  overflow-y: auto;
  overflow-x: hidden; /* Only vertical scrolling */
  scrollbar-width: thin; /* For Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

/* Webkit browsers (Chrome, Safari) - Hide scrollbar by default */
.custom-container::-webkit-scrollbar {
  width: 6px; /* Size of the scrollbar */
}

.custom-container::-webkit-scrollbar-thumb {
  background-color: #888; /* Default color */
  border-radius: 10px; /* Rounded edges */
}

/* On hover, change scrollbar thumb color */
.custom-container:hover::-webkit-scrollbar-thumb {
  background-color: #555;
}

@media only screen and (max-height: 545px) {
  .custom-container {
    height: 170px;
  }
}

@media only screen and (max-width: 760px) {
  .loader {
    display: none !important;
  }
}
@media only screen and (max-height: 460px) {
  .chatbot-container {
    display: none; /* Hides the container */
  }
  .chatbot-button {
    display: none; /* Hides the container */
  }
  .container {
    display: none;
  }
}

.analyze svg path.stick {
  transform: translate(0);
  animation: stick 2s ease infinite;
  /* Change wand color */
}

.analyze svg path.star-1 {
  fill: #ff4500; /* OrangeRed color */
  animation: sparkles 2s ease infinite, scaleStars 2s ease infinite,
    colorChange 2s ease infinite;
  animation-delay: 150ms;
}

.analyze svg path.star-2 {
  fill: #00ff00; /* Lime color */
  animation: sparkles 2s ease infinite, scaleStars 2s ease infinite,
    colorChange 2s ease infinite;
}

.board {
  animation: bounce 2s ease infinite;
}

@keyframes sparkles {
  0% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes stick {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  25% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  50% {
    transform: translate3d(3px, -2px, 0) rotate(8deg);
  }
  75% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

@keyframes scaleStars {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes colorChange {
  0% {
    fill: #ff4500; /* OrangeRed */
  }
  25% {
    fill: #ffd700; /* Gold */
  }
  50% {
    fill: #00ff00; /* Lime */
  }
  75% {
    fill: #1e90ff; /* DodgerBlue */
  }
  100% {
    fill: #ff4500; /* OrangeRed */
  }
}
/* From Uiverse.io by Chriskoziol */
.spinnerContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loader {
  color: #4a4a4a;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 25px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 40px;
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
}

.words {
  overflow: hidden;
}

.word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color: white;
  animation: cycle-words 5s infinite;
}

@keyframes cycle-words {
  10% {
    -webkit-transform: translateY(-105%);
    transform: translateY(-105%);
  }

  25% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  35% {
    -webkit-transform: translateY(-205%);
    transform: translateY(-205%);
  }

  50% {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
  }

  60% {
    -webkit-transform: translateY(-305%);
    transform: translateY(-305%);
  }

  75% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }

  85% {
    -webkit-transform: translateY(-405%);
    transform: translateY(-405%);
  }

  100% {
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%);
  }
}