/* Pablinho — chat de dúvidas do Pablote Team. Fica acima do botão do WhatsApp. */
.pb{
  --pb-red:#e3322a;
  --pb-bg:#0f0f0f;
  --pb-line:rgba(255,255,255,.09);
  font-family:'Inter', system-ui, sans-serif;
}
.pb-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* botão redondo */
.pb-fab{
  position:fixed;
  right:36px;   /* mesmo eixo do botão do WhatsApp (70px a 30px da borda) */
  bottom:116px;
  z-index:80;
  width:58px;
  height:58px;
  padding:0;
  border-radius:50%;
  border:2px solid #fff;
  background:#b10f08;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.55), 0 0 0 6px rgba(227,50,42,.12);
  cursor:pointer;
  transition:transform .2s ease;
}
.pb-fab:hover{ transform:scale(1.06); }
.pb-fab img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.pb-fab-dot{
  position:absolute; top:2px; right:2px;
  width:12px; height:12px; border-radius:50%;
  background:#2ecc71; border:2px solid #111;
}
.pb.is-open .pb-fab{ transform:scale(.92); }

/* dica que aparece sozinha */
.pb-hint{
  position:fixed;
  right:106px;
  bottom:128px;
  z-index:80;
  padding:10px 14px;
  border-radius:14px 14px 4px 14px;
  background:#fff;
  color:#111;
  font-size:13px;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
  cursor:pointer;
  animation:pb-in .35s ease;
}
.pb-hint[hidden]{ display:none; }

/* janela do chat */
.pb-panel{
  position:fixed;
  right:30px;
  bottom:188px;
  z-index:81;
  width:370px;
  height:min(560px, calc(100vh - 200px));
  display:flex;
  flex-direction:column;
  border-radius:20px;
  overflow:hidden;
  background:var(--pb-bg);
  border:1px solid var(--pb-line);
  box-shadow:0 24px 60px rgba(0,0,0,.65);
  animation:pb-in .25s ease;
}
.pb-panel[hidden]{ display:none; }
@keyframes pb-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.pb-head{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:linear-gradient(135deg, #1c0606, #120707);
  border-bottom:1px solid var(--pb-line);
}
.pb-head img{ width:42px; height:42px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(227,50,42,.6); }
.pb-head-txt{ display:flex; flex-direction:column; gap:3px; flex:1; color:#fff; }
.pb-head-txt strong{ font-size:15px; }
.pb-head-txt > span{ font-size:12px; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:6px; }
.pb-head-txt i{ width:7px; height:7px; border-radius:50%; background:#2ecc71; display:inline-block; }
.pb-close{
  width:34px; height:34px; border-radius:50%;
  border:0; background:rgba(255,255,255,.08); color:#fff;
  font-size:22px; line-height:1; cursor:pointer;
}
.pb-close:hover{ background:rgba(255,255,255,.16); }

.pb-msgs{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scrollbar-width:thin;
}
.pb-msg{
  max-width:86%;
  padding:10px 13px;
  border-radius:16px;
  font-size:14px;
  line-height:1.5;
  color:#fff;
  word-wrap:break-word;
  animation:pb-in .2s ease;
}
.pb-msg--bot{ align-self:flex-start; background:#1c1c1c; border-bottom-left-radius:4px; }
.pb-msg--user{ align-self:flex-end; background:var(--pb-red); border-bottom-right-radius:4px; }
.pb-msg b{ color:#fff; }
.pb-msg--bot b{ color:#ff6a5c; }

.pb-typing{ display:inline-flex; gap:4px; padding:4px 0; }
.pb-typing i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); animation:pb-dot 1s infinite; }
.pb-typing i:nth-child(2){ animation-delay:.15s; }
.pb-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes pb-dot{ 0%,80%,100%{ opacity:.3; transform:none; } 40%{ opacity:1; transform:translateY(-3px); } }

.pb-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pb-link{
  padding:7px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:12px; font-weight:600; text-decoration:none;
}
.pb-link:hover{ background:rgba(255,255,255,.08); }
.pb-link--whats{ background:#25d366; border-color:#25d366; color:#06240f; }
.pb-link--whats:hover{ background:#2ee374; }

.pb-chips{ display:flex; flex-wrap:wrap; gap:6px; align-self:flex-start; max-width:100%; }
.pb-chip{
  padding:7px 12px; border-radius:999px;
  border:1px solid rgba(227,50,42,.6);
  background:transparent; color:#fff;
  font:600 12px/1.2 'Inter', sans-serif;
  cursor:pointer; transition:background .2s ease;
}
.pb-chip:hover{ background:rgba(227,50,42,.18); }

.pb-form{
  display:flex; gap:8px;
  padding:12px;
  border-top:1px solid var(--pb-line);
  background:#0b0b0b;
}
.pb-form input{
  flex:1; min-width:0;
  padding:11px 14px;
  border-radius:999px;
  border:1px solid var(--pb-line);
  background:#161616; color:#fff;
  font:14px 'Inter', sans-serif;
  outline:none;
}
.pb-form input:focus{ border-color:rgba(227,50,42,.7); }
.pb-form button{
  width:42px; height:42px; flex-shrink:0;
  border-radius:50%; border:0;
  background:var(--pb-red); color:#fff; cursor:pointer;
  display:grid; place-items:center;
}
.pb-form button svg{ width:18px; height:18px; }

/* celular: o chat ocupa a tela quase toda */
@media (max-width: 640px){
  .pb-fab{ right:18px; bottom:88px; width:52px; height:52px; }
  .pb-hint{ right:80px; bottom:98px; }
  .pb-panel{
    right:8px; left:8px; bottom:8px;
    width:auto;
    height:calc(100dvh - 90px);
    border-radius:18px;
  }
  .pb.is-open .pb-fab{ display:none; }
  body.pb-aberto .whatsapp-float{ display:none !important; } /* senão tampa o botão de enviar */
  .pb-form input{ font-size:16px; } /* evita o zoom automático do iPhone ao tocar */
}

/* avatar do Pablinho ao lado das respostas */
.pb-msg--bot{ position:relative; margin-left:34px; }
.pb-msg--bot::before{
  content:"";
  position:absolute; left:-34px; bottom:0;
  width:26px; height:26px; border-radius:50%;
  background:url("img/pablinho.webp?v=1") center/cover;
}
.pb-msg--bot + .pb-msg--bot::before{ display:none; }
.pb-chips{ margin-left:34px; }