/* assistente.css — janela de atendimento (autocontida: funciona em qualquer página) */
.pv-chat,
.pv-launcher {
  --pv-surface: #ffffff;
  --pv-branco: #ffffff;
  --pv-branco-rgb: 255, 255, 255;
  --pv-texto-inverso-suave: #c5d6e8;
  --pv-borda-input: #7d8ea0;
  --pv-sombra-msg: 0 1px 1px rgba(7, 29, 54, 0.06);
  --pv-fundo: #eef2f5;
  --pv-inverse: #071d36;
  --pv-inverse-2: #0b2e54;
  --pv-texto: #071d36;
  --pv-texto-2: #4b5d70;
  --pv-texto-3: #5f7184;
  --pv-borda: #d5dfe8;
  --pv-acao: #13834d;
  --pv-acao-hover: #0f6b3f;
  --pv-acao-suave: #e3f4ea;
  --pv-bolha-cliente: #d9f2e2;
  --pv-foco: #1685d9;
  --pv-foco-rgb: 22, 133, 217;
  --pv-alerta: #b42318;
  --pv-alerta-suave: #fff1f0;
  --pv-info-suave: #eaf4fd;
  --pv-sombra: 0 18px 48px rgba(7, 29, 54, 0.22);
  --pv-fonte: "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--pv-fonte);
}

/* Some o antigo botão flutuante de WhatsApp: o atendimento passa pelo assistente */
.pv-chat-on .whatsapp-float {
  display: none !important;
}

/* ── Botão flutuante ─────────────────────────────────────────────────────── */
.pv-launcher {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vh, 28px);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 18px 8px 8px;
  color: var(--pv-branco);
  font: 700 0.95rem/1.1 var(--pv-fonte);
  cursor: pointer;
  background: var(--pv-acao);
  border: 0;
  border-radius: 999px;
  box-shadow: var(--pv-sombra);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.pv-launcher:hover { background: var(--pv-acao-hover); transform: translateY(-2px); }
.pv-launcher:focus-visible { outline: 3px solid rgba(var(--pv-foco-rgb), 0.5); outline-offset: 3px; }
.pv-launcher[hidden] { display: none; }

.pv-launcher-icone {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--pv-acao);
  background: var(--pv-branco);
  border-radius: 50%;
}

.pv-launcher-icone svg { width: 20px; height: 20px; fill: currentColor; }

/* ── Janela ──────────────────────────────────────────────────────────────── */
.pv-chat {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vh, 28px);
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 28px));
  height: min(640px, calc(100vh - 40px));
  height: min(640px, calc(100dvh - 40px));
  overflow: hidden;
  color: var(--pv-texto);
  font-size: 0.95rem;
  line-height: 1.45;
  background: var(--pv-fundo);
  border-radius: 18px;
  box-shadow: var(--pv-sombra);
  animation: pv-entra 0.25s ease-out;
}

.pv-chat[hidden] { display: none; }

@keyframes pv-entra {
  from { opacity: 0; transform: translateY(12px); }
}

.pv-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  color: var(--pv-branco);
  background: linear-gradient(135deg, var(--pv-inverse-2), var(--pv-inverse));
}

.pv-avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--pv-inverse);
  font-weight: 800;
  background: var(--pv-branco);
  border-radius: 50%;
}

.pv-ident { display: grid; flex: 1 1 auto; min-width: 0; }
.pv-ident strong { font-size: 0.98rem; }
.pv-ident small { color: var(--pv-texto-inverso-suave); font-size: 0.78rem; }

.pv-icone-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--pv-branco);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 10px;
}

.pv-icone-btn:hover { background: rgba(var(--pv-branco-rgb), 0.12); }
.pv-icone-btn:focus-visible { outline: 2px solid var(--pv-branco); outline-offset: -2px; }
.pv-icone-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Etapas (Equipamento → Problema → Encaminhamento) ────────────────────── */
.pv-etapas {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  margin: 0;
  list-style: none;
  background: var(--pv-surface);
  border-bottom: 1px solid var(--pv-borda);
  counter-reset: pvetapa;
}

.pv-etapas:empty { display: none; }

.pv-etapas li {
  display: flex;
  flex: 1 1 0;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 5px 6px;
  color: var(--pv-texto-3);
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  background: var(--pv-fundo);
  border-radius: 999px;
  counter-increment: pvetapa;
}

.pv-etapas li::before {
  content: counter(pvetapa);
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  font-size: 0.68rem;
  color: var(--pv-branco);
  background: var(--pv-texto-3);
  border-radius: 50%;
}

.pv-etapas .pv-etapa-atual { color: var(--pv-branco); background: var(--pv-inverse-2); }
.pv-etapas .pv-etapa-atual::before { color: var(--pv-inverse-2); background: var(--pv-branco); }
.pv-etapas .pv-etapa-feita { color: var(--pv-acao); background: var(--pv-acao-suave); }
.pv-etapas .pv-etapa-feita::before { content: "✓"; background: var(--pv-acao); }

/* ── Mensagens ───────────────────────────────────────────────────────────── */
.pv-msgs {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pv-msg {
  position: relative;
  max-width: 86%;
  padding: 8px 12px 6px;
  border-radius: 14px;
  box-shadow: var(--pv-sombra-msg);
  animation: pv-msg 0.2s ease-out;
}

@keyframes pv-msg {
  from { opacity: 0; transform: translateY(6px); }
}

.pv-msg p { margin: 0; overflow-wrap: anywhere; }
.pv-msg time { display: block; margin-top: 2px; color: var(--pv-texto-3); font-size: 0.7rem; text-align: right; }

.pv-bot { align-self: flex-start; background: var(--pv-surface); border-top-left-radius: 4px; }
.pv-cliente { align-self: flex-end; background: var(--pv-bolha-cliente); border-top-right-radius: 4px; }

.pv-nota {
  margin-top: 4px !important;
  color: var(--pv-texto-2);
  font-size: 0.83rem;
}

.pv-alerta { color: var(--pv-alerta); background: var(--pv-alerta-suave); border-left: 3px solid var(--pv-alerta); }
.pv-info { background: var(--pv-info-suave); }

.pv-digitando {
  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--pv-surface);
  border-radius: 14px;
}

.pv-digitando span {
  width: 6px;
  height: 6px;
  background: var(--pv-texto-3);
  border-radius: 50%;
  animation: pv-ponto 1s infinite ease-in-out;
}

.pv-digitando span:nth-child(2) { animation-delay: 0.15s; }
.pv-digitando span:nth-child(3) { animation-delay: 0.3s; }

@keyframes pv-ponto {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* ── Respostas ───────────────────────────────────────────────────────────── */
.pv-acoes {
  display: grid;
  flex: 0 0 auto;   /* as respostas nunca são espremidas pelas mensagens */
  gap: 8px;
  max-height: 58%;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--pv-fundo);
  border-top: 1px solid var(--pv-borda);
}

.pv-acoes:empty { display: none; }

.pv-opcoes { display: flex; flex-wrap: wrap; gap: 8px; }

.pv-opcao {
  min-height: 42px;
  padding: 8px 14px;
  color: var(--pv-inverse-2);
  font: 600 0.92rem/1.25 var(--pv-fonte);
  text-align: left;
  cursor: pointer;
  background: var(--pv-surface);
  border: 1px solid var(--pv-acao);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pv-opcao:hover { color: var(--pv-branco); background: var(--pv-acao); }
.pv-opcao:focus-visible { outline: 3px solid rgba(var(--pv-foco-rgb), 0.45); outline-offset: 2px; }
.pv-opcao-sec { color: var(--pv-texto-2); border-style: dashed; border-color: var(--pv-texto-3); }
.pv-opcao-sec:hover { color: var(--pv-branco); background: var(--pv-texto-2); }

.pv-form { display: flex; gap: 8px; }

.pv-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 10px 14px;
  color: var(--pv-texto);
  font: 400 1rem/1.3 var(--pv-fonte);
  background: var(--pv-surface);
  border: 1px solid var(--pv-borda-input);
  border-radius: 999px;
}

.pv-form input:focus { outline: none; border-color: var(--pv-foco); box-shadow: 0 0 0 3px rgba(var(--pv-foco-rgb), 0.18); }

.pv-enviar,
.pv-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  color: var(--pv-branco);
  font: 700 0.95rem/1.2 var(--pv-fonte);
  text-decoration: none;
  cursor: pointer;
  background: var(--pv-acao);
  border: 0;
  border-radius: 999px;
}

.pv-enviar:hover, .pv-cta:hover { color: var(--pv-branco); background: var(--pv-acao-hover); }
.pv-enviar:focus-visible, .pv-cta:focus-visible { outline: 3px solid rgba(var(--pv-foco-rgb), 0.45); outline-offset: 2px; }
.pv-cta svg { width: 20px; height: 20px; fill: currentColor; }

.pv-pular,
.pv-desfazer {
  justify-self: start;
  padding: 4px 2px;
  color: var(--pv-texto-2);
  font: 600 0.85rem/1.3 var(--pv-fonte);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
}

.pv-desfazer { color: var(--pv-texto-3); font-weight: 500; }
.pv-erro { margin: 0; color: var(--pv-alerta); font-size: 0.83rem; }
.pv-erro:empty { display: none; }

/* ── Links discretos abaixo das opções ───────────────────────────────────── */
.pv-acoes-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  align-items: center;
}

.pv-link-humano {
  padding: 4px 2px;
  color: var(--pv-acao);
  font: 700 0.85rem/1.3 var(--pv-fonte);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: 0;
}

/* ── Resumo para conferir antes de abrir o WhatsApp ──────────────────────── */
.pv-resumo {
  background: var(--pv-surface);
  border: 1px solid var(--pv-borda);
  border-radius: 12px;
}

.pv-resumo > summary {
  padding: 10px 14px;
  color: var(--pv-inverse-2);
  font-weight: 700;
  cursor: pointer;
}

.pv-resumo pre {
  max-height: 220px;
  margin: 0;
  padding: 0 14px 12px;
  overflow: auto;
  color: var(--pv-texto-2);
  font: 0.8rem/1.45 var(--pv-fonte);
  white-space: pre-wrap;
}

.pv-isca { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Celular: tela cheia ─────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .pv-chat {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .pv-chat-aberto,
  .pv-chat-aberto body {
    overflow: hidden;
  }

  .pv-launcher {
    right: 14px;
    bottom: 14px;
    padding: 8px;
  }

  .pv-launcher-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* acima do rodapé fixo do diagnóstico guiado */
  .pv-launcher-alto { bottom: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-chat, .pv-msg, .pv-digitando span { animation: none; }
}