/* Chatbot widget styles - arquivo: style.css/chatbot.css */
#nmp-chatbot {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 9999;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

#nmp-chatbot #nmp-chatbot-toggle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(180deg, #0b69ff, #0757d1);
      color: #fff;
      border: none;
      box-shadow: 0 6px 18px rgba(8, 20, 50, 0.18);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
}

#nmp-chatbot .nmp-badge {
      font-weight: 700;
      font-size: 18px
}

#nmp-chatbot #nmp-chatbot-panel {
      width: 360px;
      max-width: calc(100vw - 40px);
      height: 460px;
      display: none;
      flex-direction: column;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(6, 20, 50, 0.18);
      overflow: hidden;
      margin-bottom: 12px;
      margin-right: 0;
}

#nmp-chatbot #nmp-chatbot-panel.open {
      display: flex
}

#nmp-chatbot .nmp-chat-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      background: #fbfcff;
      border-bottom: 1px solid #eef2ff
}

#nmp-chatbot .nmp-chat-title {
      font-weight: 700;
      color: #09203f
}

#nmp-chatbot #nmp-chat-close {
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 16px
}

#nmp-chatbot .nmp-chat-body {
      flex: 1;
      padding: 12px;
      overflow: auto;
      background: linear-gradient(180deg, #fff, #fbfdff)
}

#nmp-chatbot .nmp-messages {
      display: flex;
      flex-direction: column;
      gap: 8px
}

.nmp-msg {
      max-width: 84%;
      display: inline-block;
      padding: 8px 12px;
      border-radius: 10px;
      line-height: 1.3
}

.nmp-msg-user {
      align-self: flex-end;
      background: #0b69ff;
      color: #fff;
      border-bottom-right-radius: 6px
}

.nmp-msg-bot {
      align-self: flex-start;
      background: #f1f7ff;
      color: #03203d
}

.nmp-msg-bot.dark {
      background: #0e1724;
      color: #dceeff
}

.nmp-typing .nmp-msg-text {
      opacity: 0.6
}

#nmp-chatbot .nmp-chat-form {
      display: flex;
      gap: 8px;
      padding: 10px;
      border-top: 1px solid #eef2ff;
      background: #fff
}

#nmp-chatbot .nmp-chat-form input {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid #e6eefc;
      border-radius: 8px
}

#nmp-chatbot .nmp-chat-form button {
      padding: 8px 12px;
      background: #0b69ff;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer
}

#nmp-chatbot .nmp-chat-footer {
      display: flex;
      gap: 8px;
      padding: 8px;
      border-top: 1px solid #f1f5ff;
      background: #fff
}

#nmp-chatbot .nmp-chat-footer .ghost {
      background: transparent;
      border: 1px solid #e6eefc;
      padding: 6px 10px;
      border-radius: 8px;
      cursor: pointer
}

/* mobile tweaks */
@media (max-width:520px) {
      #nmp-chatbot {
            right: 12px;
            bottom: 12px
      }

      #nmp-chatbot #nmp-chatbot-panel {
            width: 94vw;
            height: 68vh
      }
}

/* dark mode support (checks panel.dark class added by JS) */
#nmp-chatbot #nmp-chatbot-panel.dark {
      background: #071026;
      color: #e6f2ff
}

#nmp-chatbot #nmp-chatbot-panel.dark .nmp-chat-body {
      background: linear-gradient(180deg, #071026, #07182a)
}

#nmp-chatbot #nmp-chatbot-panel.dark .nmp-msg-user {
      background: #2b6bff
}

#nmp-chatbot #nmp-chatbot-panel.dark .nmp-msg-bot {
      background: #071a2a;
      color: #e6f2ff
}

/* ==========================
   Responsive: chatbot.css
   Mobile-first: celulares (<=599px), tablets (600-991px), notebooks (>=992px)
   Ajustes para: widget position, panel size, button tamanhos e spacing
   ========================== */

/* Small devices - celulares */
@media (max-width: 599px) {
      #nmp-chatbot {
            right: 10px;
            bottom: 10px;
      }

      #nmp-chatbot #nmp-chatbot-toggle {
            width: 48px;
            height: 48px;
            font-size: 1.2rem;
      }

      #nmp-chatbot #nmp-chatbot-panel {
            width: 90vw;
            height: 65vh;
            max-width: calc(100vw - 20px);
      }

      #nmp-chatbot .nmp-msg {
            max-width: 90%;
            padding: 8px 12px;
            font-size: 0.9rem;
      }

      #nmp-chatbot .nmp-chat-form input {
            font-size: 16px;
            /* previne zoom em iOS */
      }

      #nmp-chatbot .nmp-chat-footer .ghost {
            padding: 6px 8px;
            font-size: 0.85rem;
      }
}

/* Medium devices - tablets / pequenos notebooks */
@media (min-width: 600px) and (max-width: 991px) {
      #nmp-chatbot {
            right: 15px;
            bottom: 15px;
      }

      #nmp-chatbot #nmp-chatbot-toggle {
            width: 52px;
            height: 52px;
      }

      #nmp-chatbot #nmp-chatbot-panel {
            width: 380px;
            height: 500px;
            max-width: calc(100vw - 30px);
      }

      #nmp-chatbot .nmp-msg {
            max-width: 85%;
      }
}

/* Large devices - notebooks e desktops */
@media (min-width: 992px) {
      #nmp-chatbot {
            right: 20px;
            bottom: 20px;
      }

      #nmp-chatbot #nmp-chatbot-toggle {
            width: 56px;
            height: 56px;
      }

      #nmp-chatbot #nmp-chatbot-panel {
            width: 360px;
            height: 460px;
      }

      #nmp-chatbot .nmp-msg {
            max-width: 84%;
      }
}

/* Move chatbot upward on small screens so it doesn't overlap the mobile navbar */
@media (max-width: 768px) {

      /* ensure the chatbot sits above the mobile navbar (navbar ~56px high + spacing) */
      #nmp-chatbot {
            bottom: 88px !important;
      }

      /* also constrain panel max-height so it fits the viewport above the navbar */
      #nmp-chatbot #nmp-chatbot-panel {
            max-height: calc(100vh - 120px) !important;
      }
}