/* ── Chatbot Flow WP Widget ──────────────────────────────────────────────── */
#chatbot-root {
  --chatbot-primary:   #2563EB;
  --chatbot-secondary: #FFFFFF;
  --chatbot-bubble:    #2563EB;
  --chatbot-radius:    14px;
  --chatbot-font:      system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --chatbot-shadow:    0 4px 28px rgba(0,0,0,.18);

  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2147483640;
  font-family: var(--chatbot-font);
  font-size: 15px;
  line-height: 1.5;
  box-sizing: border-box;
}

#chatbot-root *, #chatbot-root *::before, #chatbot-root *::after {
  box-sizing: border-box;
}

/* ── Bubble button ─────────────────────────────────────────────────────────── */
#chatbot-bubble {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--chatbot-bubble);
  border: none;
  cursor: pointer;
  box-shadow: var(--chatbot-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
  margin-left: auto;
}
#chatbot-bubble:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 32px rgba(0,0,0,.24);
}
#chatbot-bubble svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

#chatbot-unread-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #EF4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Chat window ───────────────────────────────────────────────────────────── */
#chatbot-window {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 370px;
  max-height: 560px;
  background: #fff;
  border-radius: var(--chatbot-radius);
  box-shadow: var(--chatbot-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: chatbotSlideIn .22s ease;
}
#chatbot-window[hidden] { display: none !important; }

@keyframes chatbotSlideIn {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ── Header ────────────────────────────────────────────────────────────────── */
#chatbot-header {
  background: var(--chatbot-primary);
  color: var(--chatbot-secondary);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
#chatbot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,.2);
  flex-shrink: 0;
}
#chatbot-bot-name {
  font-weight: 600;
  font-size: 15px;
  flex: 1;
}
#chatbot-close {
  background: transparent;
  border: none;
  color: var(--chatbot-secondary);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: .8;
  transition: opacity .15s;
}
#chatbot-close:hover { opacity: 1; }

/* ── Message thread ────────────────────────────────────────────────────────── */
#chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.chatbot-msg {
  display: flex;
  flex-direction: column;
  max-width: 84%;
}
.chatbot-msg--bot  { align-self: flex-start; }
.chatbot-msg--user { align-self: flex-end; text-align: right; }

.chatbot-bubble-text {
  padding: 10px 14px;
  border-radius: 4px 14px 14px 14px;
  background: #F1F5F9;
  color: #1E293B;
  font-size: 14px;
  word-break: break-word;
}
.chatbot-msg--user .chatbot-bubble-text {
  background: var(--chatbot-primary);
  color: var(--chatbot-secondary);
  border-radius: 14px 4px 14px 14px;
}

/* ── Options buttons ───────────────────────────────────────────────────────── */
.chatbot-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.chatbot-option-btn {
  border: 2px solid var(--chatbot-primary);
  color: var(--chatbot-primary);
  background: #fff;
  border-radius: 20px;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--chatbot-font);
  transition: background .15s, color .15s;
  line-height: 1.4;
}
.chatbot-option-btn:hover,
.chatbot-option-btn:focus {
  background: var(--chatbot-primary);
  color: var(--chatbot-secondary);
  outline: none;
}
.chatbot-option-btn:disabled {
  opacity: .5;
  cursor: default;
}

/* ── Typing indicator ──────────────────────────────────────────────────────── */
.chatbot-typing {
  display: flex;
  gap: 5px;
  padding: 10px 14px;
  align-items: center;
}
.chatbot-typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94A3B8;
  animation: chatbotBounce 1.2s infinite ease-in-out;
}
.chatbot-typing span:nth-child(2) { animation-delay: .2s; }
.chatbot-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes chatbotBounce {
  0%,60%,100% { transform: translateY(0); }
  30%          { transform: translateY(-7px); }
}

/* ── Input area ────────────────────────────────────────────────────────────── */
#chatbot-input-area {
  padding: 12px 16px;
  border-top: 1px solid #E2E8F0;
  flex-shrink: 0;
}

.chatbot-input-label {
  display: block;
  font-size: 12px;
  color: #64748B;
  margin-bottom: 4px;
}

.chatbot-input-row {
  display: flex;
  gap: 8px;
}

.chatbot-text-input {
  flex: 1;
  border: 1.5px solid #CBD5E1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--chatbot-font);
  outline: none;
  transition: border-color .15s;
}
.chatbot-text-input:focus { border-color: var(--chatbot-primary); }

.chatbot-submit-btn {
  background: var(--chatbot-primary);
  color: var(--chatbot-secondary);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--chatbot-font);
  font-weight: 600;
  transition: opacity .15s;
  white-space: nowrap;
}
.chatbot-submit-btn:hover  { opacity: .88; }
.chatbot-submit-btn:disabled { opacity: .5; cursor: default; }

.chatbot-input-error {
  font-size: 12px;
  color: #EF4444;
  margin-top: 4px;
}

/* ── Restart button ────────────────────────────────────────────────────────── */
.chatbot-restart-btn {
  background: transparent;
  border: 1.5px solid #CBD5E1;
  border-radius: 20px;
  color: #64748B;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--chatbot-font);
  padding: 5px 14px;
  margin-top: 8px;
  transition: border-color .15s, color .15s;
}
.chatbot-restart-btn:hover {
  border-color: var(--chatbot-primary);
  color: var(--chatbot-primary);
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */
/* Ponteiro grosseiro (dedo) OU tela estreita: o chat vira tela cheia. A consulta
   por `pointer: coarse` pega celulares em landscape, que passam de 600px de
   largura mas continuam sendo tocados com o dedo. */
@media (max-width: 600px), (pointer: coarse) and (max-width: 900px) {
  #chatbot-root {
    bottom: 16px;
    right: 16px;
  }

  /* :not(.chatbot-inline) — no modo inline (página compartilhável do Nihon) o
     chat já preenche o container com position: static; o inset abaixo o
     quebraria. */
  #chatbot-root:not(.chatbot-inline) #chatbot-window {
    position: fixed;
    inset: 0;
    width: 100%;
    max-height: none;
    /* dvh acompanha o teclado virtual e as barras do navegador; o vh acima é o
       fallback para navegadores sem suporte. */
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    transform-origin: center bottom;
  }

  /* Header e input encostam nas bordas do aparelho — respeitar o notch e a
     barra de gestos do iOS. */
  #chatbot-header {
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }

  #chatbot-input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }

  #chatbot-messages {
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    /* Rolagem com inércia e sem "puxar" a página atrás do chat. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Em tela cheia a bolha some enquanto o chat está aberto. */
  #chatbot-root.chatbot-open #chatbot-bubble { display: none; }

  /* Balões podem ocupar mais da largura — a tela é maior que a janelinha. */
  .chatbot-msg { max-width: 88%; }
  .chatbot-bubble-text { font-size: 15px; }

  /* ── Alvos de toque ──────────────────────────────────────────────────────
     Mínimo de 44px de altura (recomendação de acessibilidade). O fluxo da
     Nihon tem menus de até 6 opções empilhadas — errar o toque era fácil. */
  .chatbot-option-btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
    /* Ocupar a linha inteira quando o rótulo é longo, em vez de espremer. */
    flex: 1 1 auto;
  }

  .chatbot-restart-btn { min-height: 44px; padding: 10px 18px; }

  .chatbot-submit-btn {
    min-height: 44px;
    padding: 10px 20px;
  }

  #chatbot-close {
    /* O ✕ tinha ~24px de área tocável, encostado na borda da tela. */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  #chatbot-bubble {
    width: 60px;
    height: 60px;
  }

  /* Trava a rolagem do site enquanto o chat ocupa a tela (classe posta pelo JS
     no <html>). Só no mobile: no desktop o chat é uma janelinha e a página
     continua navegável. */
  html.chatbot-lock-scroll,
  html.chatbot-lock-scroll body {
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* ── Zoom automático no iOS ──────────────────────────────────────────────────
   O Safari no iPhone dá zoom na página inteira ao focar qualquer campo com
   fonte menor que 16px — a tela salta e o layout desalinha. 16px trava isso.
   Fora de media query: vale para qualquer iPhone, inclusive em landscape. */
.chatbot-text-input,
select.chatbot-text-input,
textarea.chatbot-text-input {
  font-size: 16px;
}

/* Em telas de toque, remover o hover "grudado" — sem mouse, o :hover fica
   preso no último botão tocado até o próximo toque. */
@media (hover: none) {
  .chatbot-option-btn:hover {
    background: #fff;
    color: var(--chatbot-primary);
  }
  .chatbot-option-btn:active {
    background: var(--chatbot-primary);
    color: var(--chatbot-secondary);
  }
  #chatbot-bubble:hover { transform: none; }
  .chatbot-restart-btn:hover { border-color: #CBD5E1; color: #64748B; }
}