/* --- BOTÃO WHATSAPP --- */
    #whatsapp-button {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #25d366;
      color: #fff;
      font-size: 28px;
      padding: 15px;
      border-radius: 50%;
      cursor: pointer;
      z-index: 1000;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      animation: pulse 1.5s infinite;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #whatsapp-button img {
      width: 28px;
      height: 28px;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    /* --- NOTIFICAÇÃO --- */
    #chat-notification {
      display: none;
      position: fixed;
      bottom: 90px;
      right: 20px;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 15px 20px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      z-index: 1000;
      max-width: 250px;
      font-family: sans-serif;
    }
    #chat-notification p {
      margin: 5px 0 0;
      font-size: 14px;
      color: #333;
    }
    #close-notif {
      position: absolute;
      top: 5px;
      right: 8px;
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
      color: #888;
    }

    /* --- CHAT --- */
    #chat-container {
      display: none;
      flex-direction: column;
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 95%;
      max-width: 400px;
      height: 80%;
      background: #ece5dd;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      overflow: hidden;
      z-index: 1001;
      font-family: Arial, sans-serif;
    }
    #chat-header {
      background: #075e54;
      color: #fff;
      padding: 10px;
      font-size: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
    }
    #chat-header img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
    #chat-header button {
      margin-left: auto;
      background: none;
      border: none;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
    #chat-box {
      flex: 1;
      padding: 10px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    .message {
      margin: 8px 0;
      padding: 10px 14px;
      border-radius: 15px;
      max-width: 75%;
      line-height: 1.4;
      font-size: 15px;
      animation: fadeIn 0.3s ease-in-out;
    }
    .bot { background: #fff; align-self: flex-start; }
    .user { background: #dcf8c6; align-self: flex-end; }
    @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

    #inputArea {
      display: flex;
      padding: 10px;
      border-top: 1px solid #ccc;
      background: #f0f0f0;
    }
    #userInput {
      flex: 1;
      padding: 12px 15px;
      border-radius: 25px;
      border: 1px solid #ccc;
      font-size: 16px;
    }

    /* --- DIGITANDO --- */
    .typing-dots {
      display: inline-flex;
      gap: 4px;
      font-size: 20px;
    }
    .typing-dots span {
      animation: blink 1.4s infinite both;
    }
    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes blink {
      0%, 80%, 100% { opacity: 0.2; }
      40% { opacity: 1; }
    }
    .online-dot {
  width: 8px;
  height: 8px;
  background: #25d366;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.online-dot::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #25d366;
  border-radius: 50%;
  top: -4px;
  left: -4px;
  animation: pulseOnline 1.5s infinite;
}

@keyframes pulseOnline {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.8;
  }
}