.chatbot-wrapper {

  position: fixed;

  bottom: 20px;

  right: 20px;

  z-index: 99999;

  font-family: 'Poppins', sans-serif;

}

/* ==========================================
   TOGGLE BUTTON
========================================== */

#chatbotToggle {

  position: relative;

  display: flex;

  align-items: center;

  gap: 12px;

  background: transparent;

  border: none;

  cursor: pointer;

  animation:
    chatbotPulse 2s infinite;

  transition: 0.3s ease;

}

#chatbotToggle:hover {

  transform: translateY(-3px);

}

/* ==========================================
   LOGO
========================================== */

#chatbotToggle img {

  width: 78px;

  height: 78px;

  object-fit: contain;

  background: rgb(2, 22, 75);

  border-radius: 50%;

  padding: 7px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

  border: 3px solid rgb(240, 217, 10);

}

/* ==========================================
   MESSAGE BUBBLE
========================================== */

#chatbotToggle::after {

  content: "🙏 Ciao, sono qui";

  background:
    linear-gradient(
      135deg,
      #0f172a,
      #1e293b
    );

  color: white;

  padding: 11px 17px;

  border-radius: 30px;

  font-size: 14px;

  font-weight: 500;

  white-space: nowrap;

  box-shadow:
    0 8px 20px rgba(0,0,0,0.15);

}

/* ==========================================
   CHATBOX
========================================== */

.chatbot-box {

  position: fixed;

  bottom: 105px;

  right: 0;

  width: 370px;

  height: 580px;

  background: white;

  border-radius: 24px;

  overflow: hidden;

  display: none;

  flex-direction: column;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.2);

  border:
    1px solid rgba(255,255,255,0.2);

}

.chatbot-box.active {

  display: flex;

  animation: chatbotFade 0.35s ease;

}

/* ==========================================
   OPEN ANIMATION
========================================== */

@keyframes chatbotFade {

  from {

    opacity: 0;

    transform:
      translateY(25px)
      scale(0.95);

  }

  to {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

  }

}

/* ==========================================
   HEADER
========================================== */

.chatbot-header {

  background:
    linear-gradient(
      135deg,
      #0f172a,
      #1e293b
    );

  color: white;

  padding: 18px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.chatbot-header strong {

  font-size: 20px;

  font-weight: 700;

}

.chatbot-header p {

  margin-top: 4px;

  font-size: 13px;

  opacity: 0.85;

}

#chatbotClose {

  background: transparent;

  border: none;

  color: white;

  font-size: 24px;

  cursor: pointer;

}

/* ==========================================
   MESSAGES
========================================== */

.chatbot-messages {

  flex: 1;

  padding: 20px;

  overflow-y: auto;

  background:
    linear-gradient(
      to bottom,
      #f8fafc,
      #eef2f7
    );

  display: flex;

  flex-direction: column;

  gap: 14px;

}

/* ==========================================
   MESSAGE
========================================== */

.chat-message {

  max-width: 85%;

  padding: 14px 16px;

  border-radius: 18px;

  line-height: 1.6;

  font-size: 14px;

  word-wrap: break-word;

  animation:
    messageFade 0.25s ease;

}

@keyframes messageFade {

  from {

    opacity: 0;

    transform:
      translateY(10px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}

/* ==========================================
   BOT MESSAGE
========================================== */

.chat-message.bot {

  background: white;

  color: #0f172a;

  align-self: flex-start;

  border-bottom-left-radius: 5px;

  box-shadow:
    0 5px 15px rgba(0,0,0,0.05);

}

/* ==========================================
   USER MESSAGE
========================================== */

.chat-message.user {

  background:
    linear-gradient(
      135deg,
      #0f172a,
      #1e293b
    );

  color: white;

  align-self: flex-end;

  border-bottom-right-radius: 5px;

}

/* ==========================================
   INPUT AREA
========================================== */

.chatbot-input-area {

  padding: 16px;

  border-top:
    1px solid #e2e8f0;

  display: flex;

  gap: 10px;

  background: white;

}

/* ==========================================
   INPUT
========================================== */

#chatbotInput {

  flex: 1;

  height: 50px;

  border:
    1px solid #dbe2ea;

  border-radius: 14px;

  padding: 0 16px;

  outline: none;

  font-size: 14px;

  transition: 0.3s ease;

}

#chatbotInput:focus {

  border-color: #0f172a;

  box-shadow:
    0 0 0 3px rgba(15,23,42,0.08);

}

/* ==========================================
   SEND BUTTON
========================================== */

#chatbotSend {

  min-width: 95px;

  border: none;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #0f172a,
      #1e293b
    );

  color: white;

  cursor: pointer;

  font-weight: 600;

  transition: 0.3s ease;

}

#chatbotSend:hover {

  transform: translateY(-1px);

}

/* ==========================================
   SCROLLBAR
========================================== */

.chatbot-messages::-webkit-scrollbar {

  width: 6px;

}

.chatbot-messages::-webkit-scrollbar-thumb {

  background: #cbd5e1;

  border-radius: 20px;

}

/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {

  .chatbot-box {

    width: 360px;

    height: 560px;

  }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

  .chatbot-wrapper {

    right: 0;

    bottom: 0;

  }

  .chatbot-box {

    position: fixed;

    right: 12px;

    bottom: 90px;

    width: calc(100vw - 24px);

    height: 78vh;

    max-width: 420px;

    border-radius: 22px;

  }

  #chatbotToggle {

    position: fixed;

    right: 14px;

    bottom: 14px;

    z-index: 999999;

  }

  #chatbotToggle img {

    width: 64px;

    height: 64px;

  }

  #chatbotToggle::after {

    font-size: 12px;

    padding: 8px 14px;

  }

}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

  .chatbot-wrapper {

    right: 12px;

    bottom: 12px;

  }

  .chatbot-box {

  position: fixed;

  right: 10px;

  bottom: 82px;

  width: 92vw;

  max-width: 360px;

  height: min(68vh, 580px);

  max-height: calc(100vh - 110px);

  border-radius: 22px;

  z-index: 999999;

}

  .chatbot-header {

    padding: 15px;

  }

  .chatbot-header strong {

    font-size: 17px;

  }

  .chatbot-header p {

    font-size: 12px;

  }

  .chatbot-messages {

    padding: 14px;

  }

  .chat-message {

    max-width: 92%;

    font-size: 13px;

    padding: 12px 14px;

  }

  .chatbot-input-area {

    padding: 10px;

    gap: 8px;

  }

  #chatbotInput {

    height: 44px;

    font-size: 13px;

    padding: 0 12px;

  }

  #chatbotSend {

    min-width: 74px;

    font-size: 13px;

  }

  #chatbotToggle {

    position: fixed;

    right: 10px;

    bottom: 10px;

    z-index: 999999;

  }

  #chatbotToggle img {

    width: 56px;

    height: 56px;

  }

  #chatbotToggle::after {

    display: none;

  }

}
/* ==========================================
   VERY SMALL DEVICES
========================================== */

@media (max-width: 360px) {

  .chatbot-box {

    width: calc(100vw - 12px);

    right: 6px;

    bottom: 78px;

    height: 84vh;

  }

  #chatbotToggle::after {

    display: none;

  }

  #chatbotToggle img {

    width: 52px;

    height: 52px;

  }

}

@media (max-height: 750px) {

  .chatbot-box {

    height: 62vh !important;

    max-height: calc(100vh - 95px);

    bottom: 72px;

  }

}