/* ============================================================
   PROTOCOLO MESHMIXER — Assistente de dúvidas
   Compacto: nasce com rótulo, recolhe para ícone, sai do
   caminho ao rolar. Prefixo pmq- para não colidir com a landing.
   ============================================================ */
#pmq{
  --q-bg:#141428;
  --q-bg2:#1A1A2E;
  --q-cyan:#00C8D4;
  --q-line:rgba(255,255,255,0.10);
  --q-txt:rgba(255,255,255,0.86);
  --q-dim:rgba(255,255,255,0.42);
  --q-grad:linear-gradient(135deg,#E63B2E,#E8732A);
  position:fixed;
  right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));
  z-index:9999;
  font-family:'Exo 2',-apple-system,BlinkMacSystemFont,sans-serif;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s;
}
/* ao rolar para baixo, encosta um pouco para fora do caminho */
#pmq.pmq-tuck{transform:translateY(9px);opacity:.8;}

/* ── botão ── */
.pmq-fab{
  display:flex;align-items:center;
  height:46px;padding:0 15px;gap:8px;
  background:var(--q-grad);
  color:#fff;border:none;cursor:pointer;
  border-radius:23px;
  box-shadow:0 5px 18px rgba(230,59,46,0.32);
  font-family:'Rajdhani',sans-serif;
  font-size:0.8rem;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;
  white-space:nowrap;
  transition:box-shadow .2s,transform .2s,padding .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);
}
.pmq-fab:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(230,59,46,0.42);}
.pmq-fab svg{width:20px;height:20px;flex-shrink:0;}
.pmq-fab span{
  max-width:130px;opacity:1;overflow:hidden;
  transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .2s;
}
/* recolhido: só o ícone */
#pmq.pmq-mini .pmq-fab{padding:0;width:46px;justify-content:center;gap:0;}
#pmq.pmq-mini .pmq-fab span{max-width:0;opacity:0;}
#pmq.pmq-open .pmq-fab{display:none;}

/* ── painel ── */
.pmq-panel{
  width:min(354px,calc(100vw - 28px));
  height:min(500px,calc(100vh - 110px));
  background:var(--q-bg);
  border:1px solid var(--q-line);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,0.5);
  display:flex;flex-direction:column;
  overflow:hidden;
  transform-origin:bottom right;
  animation:pmqIn .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes pmqIn{from{opacity:0;transform:translateY(10px) scale(.97);}}

/* sem isto o display:flex acima vence o atributo hidden e o painel
   nunca fecha. A especificidade de .pmq-panel[hidden] (0,2,0) ganha. */
.pmq-panel[hidden]{display:none!important;}

.pmq-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:12px 14px;
  background:var(--q-bg2);
  border-bottom:1px solid var(--q-line);
  position:relative;flex-shrink:0;
}
.pmq-head::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--q-grad);
}
.pmq-head strong{
  display:block;
  font-family:'Rajdhani',sans-serif;
  font-size:0.94rem;font-weight:700;letter-spacing:0.5px;color:#fff;
}
.pmq-head small{
  display:block;margin-top:2px;
  font-size:0.68rem;color:var(--q-dim);line-height:1.4;
}
.pmq-x{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;margin:-5px -6px -5px 0;
  flex-shrink:0;
  background:none;border:none;border-radius:8px;
  color:var(--q-dim);
  font-size:22px;line-height:1;cursor:pointer;padding:0;
  transition:color .18s,background .18s;
}
.pmq-x:hover{color:#fff;background:rgba(255,255,255,0.08);}
.pmq-x:active{background:rgba(255,255,255,0.14);}
.pmq-x:focus-visible{outline:2px solid var(--q-cyan);outline-offset:1px;}

/* ── log ── */
.pmq-log{
  flex:1;overflow-y:auto;
  padding:14px;
  display:flex;flex-direction:column;gap:9px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.14) transparent;
  overscroll-behavior:contain;
}
.pmq-log::-webkit-scrollbar{width:6px;}
.pmq-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14);border-radius:3px;}

.pmq-msg{
  font-size:0.845rem;line-height:1.55;
  max-width:93%;
  border-radius:11px;
  padding:10px 12px;
  animation:pmqMsg .18s ease;
}
@keyframes pmqMsg{from{opacity:0;transform:translateY(5px);}}
.pmq-msg p{margin:0;color:var(--q-txt);}
.pmq-msg strong{color:#fff;font-weight:600;}

.pmq-you{
  align-self:flex-end;
  background:rgba(232,115,42,0.16);
  border:1px solid rgba(232,115,42,0.26);
  color:#fff;
}
.pmq-bot{
  align-self:flex-start;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--q-line);
}

.pmq-src{
  display:inline-block;margin-top:8px;
  font-family:'Rajdhani',sans-serif;
  font-size:0.7rem;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;
  color:var(--q-cyan);text-decoration:none;
  border-bottom:1px solid rgba(0,200,212,0.3);
}
.pmq-src:hover{border-bottom-color:var(--q-cyan);}

.pmq-more{margin-top:10px;padding-top:8px;border-top:1px solid var(--q-line);}
.pmq-more span{
  display:block;margin-bottom:4px;
  font-family:'Rajdhani',sans-serif;
  font-size:0.63rem;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;
  color:var(--q-dim);
}
.pmq-more a{
  display:block;
  font-size:0.765rem;line-height:1.35;
  color:rgba(255,255,255,0.58);
  text-decoration:none;padding:4px 0;
  transition:color .18s,padding-left .18s;
}
.pmq-more a:hover{color:var(--q-cyan);padding-left:4px;}

.pmq-wa{
  display:inline-block;margin-top:9px;
  background:var(--q-grad);
  color:#fff;text-decoration:none;
  padding:7px 14px;border-radius:20px;
  font-family:'Rajdhani',sans-serif;
  font-size:0.72rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
}

.pmq-unsure{margin-top:10px;padding-top:9px;border-top:1px dashed rgba(232,115,42,0.28);}
.pmq-unsure span{
  display:block;margin-bottom:7px;
  font-size:0.755rem;line-height:1.45;
  color:rgba(255,255,255,0.5);
}
.pmq-unsure .pmq-wa{margin-top:0;}

/* ── digitando ── */
.pmq-dots{display:inline-flex;gap:4px;padding:2px 0;}
.pmq-dots i{
  width:5px;height:5px;border-radius:50%;
  background:var(--q-cyan);opacity:.3;
  animation:pmqBlink 1.1s infinite;
}
.pmq-dots i:nth-child(2){animation-delay:.16s;}
.pmq-dots i:nth-child(3){animation-delay:.32s;}
@keyframes pmqBlink{0%,60%,100%{opacity:.26;}30%{opacity:1;}}

/* ── sugestões ── */
.pmq-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 9px;flex-shrink:0;}
.pmq-chips button{
  background:rgba(0,200,212,0.06);
  border:1px solid rgba(0,200,212,0.2);
  color:rgba(255,255,255,0.68);
  border-radius:20px;padding:5px 10px;
  font-family:'Exo 2',sans-serif;font-size:0.7rem;
  cursor:pointer;transition:all .18s;
}
.pmq-chips button:hover{
  background:rgba(0,200,212,0.14);
  color:#fff;border-color:rgba(0,200,212,0.4);
}

/* ── entrada ── */
.pmq-bar{
  display:flex;gap:7px;padding:10px 12px;
  border-top:1px solid var(--q-line);
  background:var(--q-bg2);flex-shrink:0;
}
.pmq-bar input{
  flex:1;min-width:0;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--q-line);
  border-radius:8px;padding:9px 11px;
  color:#fff;font-family:'Exo 2',sans-serif;font-size:16px;  /* <16px: iPhone amplia ao tocar */
  outline:none;transition:border-color .2s;
}
.pmq-bar input::placeholder{color:rgba(255,255,255,0.3);}
.pmq-bar input:focus{border-color:rgba(0,200,212,0.45);}
.pmq-send{
  background:var(--q-grad);
  border:none;color:#fff;cursor:pointer;
  border-radius:8px;padding:0 14px;
  font-family:'Rajdhani',sans-serif;
  font-size:0.73rem;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
  transition:opacity .2s;
}
.pmq-send:hover{opacity:.88;}

/* ── mobile: círculo discreto, painel não ocupa a tela toda ── */
@media (max-width:520px){
  #pmq{right:14px;bottom:14px;left:auto;}
  .pmq-fab{height:44px;}
  #pmq.pmq-mini .pmq-fab{width:44px;}
  .pmq-panel{
    position:fixed;
    right:10px;left:10px;bottom:10px;
    width:auto;
    height:min(68vh,470px);
  }
}

/* telas baixas: não engolir a página */
@media (max-height:620px){
  .pmq-panel{height:calc(100vh - 96px);}
}

@media (prefers-reduced-motion:reduce){
  #pmq,.pmq-panel,.pmq-msg,.pmq-fab,.pmq-fab span{animation:none;transition:none;}
  .pmq-dots i{animation:none;opacity:.6;}
}
