.resizer {
  font-size: 12px;
}
.resizer-o {
  font-size: 12px;
  display: none;
}
.chatbot {
  position: fixed;
  top: 0;
  right: 0;
  width: 350px;
  height: 100%;
  transform: scale(0.8) translateY(20px);
  opacity: 0;
  transition: all 0.5s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-white);
  color: var(--c-dark);
  border: none;
  z-index: 1092 !important;
}

.offcanvas, .offcanvas-backdrop, .offcanvas-end {
  --bs-offcanvas-border-width: 0;
  border:none !important;
}
chatbot.offcanvas .offcanvas-backdrop {
  background: rgba(17, 24, 39, 0.95) !important;
  backdrop-filter: blur(8px);
}

.offcanvas-header {
    height: var(--navbar-height) !important;
}

.chatbot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.bottom-area {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 27%;
}
.loading {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
  border-radius: 10px;
}
.message {
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.chatbot.show {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.chat-messages {
  height: 70%;
  overflow-y: auto;
  background: var(--bg-white);
  color: var(--c-dark);
}
.chat-message {
  margin: 8px 0;
  padding: 12px 16px;
  border-radius: 20px;
  max-width: 90%;
}
.user-message {
  background: var(--bg-white);
  color: var(--c-dark);
  margin-left: auto;
}
.ai-message {
  background: var(--bg-white);
  color: var(--c-dark);
  border: 1px solid #dee2e6;
  margin-right: auto;
}
.send-btn {
  transition: all 0.2s;
}
.send-btn:hover {
  transform: scale(1.05);
}
.send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fab-chatbot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1060 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end;
}

.fab-chatbot {
    z-index: 1062 !important;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--bg-primer);
  border: none;
  color: var(--c-light);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fab-chatbot-blueBounce 1.5s ease-out forwards;
  opacity: 0;
}

.fab-chatbot-label {
  background: var(--bg-primer);
  color: var(--c-light);
  margin-bottom: 5px;
  padding: 10px 18px;
  border-radius: 10px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: fab-chatbot-blueLabelIn 1s 2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    fab-chatbot-blueLabelOut 1s 7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fab-chatbot:hover ~ .fab-chatbot-label,
.fab-chatbot-container:hover .fab-chatbot-label {
  opacity: 1 !important;
}

@keyframes fab-chatbot-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fab-chatbot-blueBounce {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(12px);
  }
  55% {
    transform: scale(1.06) translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fab-chatbot-blueLabelIn {
  0% {
    opacity: 0;
    transform: translateY(70px) translateX(70px) scale(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
}

@keyframes fab-chatbot-blueLabelOut {
  0% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(70px) translateX(70px) scale(0);
  }
}