/* ============================================================
   Léo — widget chat Planeo Protect
   ============================================================ */

:root{
  --pp-blue:#0070E0;
  --pp-navy:#0B1A2E;
  --pp-radius:14px;
}

/* ---- Bouton bulle ---- */
#pp-chat-btn{
  position:fixed;bottom:24px;right:24px;
  width:56px;height:56px;border-radius:50%;
  background:var(--pp-blue);color:#fff;
  border:none;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,112,224,.38);
  display:flex;align-items:center;justify-content:center;
  z-index:9998;transition:transform .2s,box-shadow .2s;
}
#pp-chat-btn:hover{transform:scale(1.07);box-shadow:0 6px 24px rgba(0,112,224,.5)}
#pp-chat-btn svg{width:26px;height:26px;fill:#fff}
#pp-chat-btn.open .ico-chat{display:none}
#pp-chat-btn.open .ico-close{display:block}
#pp-chat-btn .ico-close{display:none}
#pp-chat-badge{
  position:absolute;top:0;right:0;
  background:#ef4444;color:#fff;
  width:18px;height:18px;border-radius:50%;font-size:.68rem;font-weight:700;
  display:none;align-items:center;justify-content:center;
  border:2px solid #fff;
}
#pp-chat-badge.show{display:flex}

/* ---- Fenêtre ---- */
#pp-chat-win{
  position:fixed;bottom:90px;right:24px;
  width:370px;max-height:580px;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #e2e6ea;
  border-radius:var(--pp-radius);
  box-shadow:0 12px 48px rgba(0,0,0,.14);
  z-index:9997;
  opacity:0;transform:translateY(16px) scale(.97);
  pointer-events:none;transition:opacity .22s,transform .22s;
}
#pp-chat-win.visible{opacity:1;transform:none;pointer-events:all}

/* ---- En-tête ---- */
.pp-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:var(--pp-blue);
  border-radius:var(--pp-radius) var(--pp-radius) 0 0;color:#fff;
}
.pp-head-avatar{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;
}
.pp-head-name{font-weight:700;font-size:.95rem}
.pp-head-sub{font-size:.75rem;opacity:.88;margin-top:1px}
.pp-head-close{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.82);padding:4px;border-radius:6px;
}
.pp-head-close:hover{background:rgba(255,255,255,.15);color:#fff}

/* ---- Messages ---- */
.pp-msgs{
  flex:1;overflow-y:auto;padding:14px 14px 8px;
  display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;
}
.pp-msg{max-width:88%;display:flex;flex-direction:column;gap:2px}
.pp-msg.bot,.pp-msg.agent{align-self:flex-start}
.pp-msg.user{align-self:flex-end}
.pp-bubble{
  padding:9px 13px;border-radius:14px;
  font-size:.88rem;line-height:1.5;word-break:break-word;white-space:pre-wrap;
}
.pp-msg.bot .pp-bubble{background:#f0f4f8;color:var(--pp-navy);border-bottom-left-radius:4px}
.pp-msg.agent .pp-bubble{background:#fef3c7;color:#92400e;border-bottom-left-radius:4px}
.pp-msg.user .pp-bubble{background:var(--pp-blue);color:#fff;border-bottom-right-radius:4px}
.pp-bubble a{color:inherit;text-decoration:underline}
.pp-meta{font-size:.7rem;color:#9ca3af}
.pp-msg.user .pp-meta{text-align:right}
.pp-typing{display:flex;align-items:center;gap:4px;padding:10px 14px;background:#f0f4f8;border-radius:14px;border-bottom-left-radius:4px;align-self:flex-start;width:56px}
.pp-typing span{width:7px;height:7px;border-radius:50%;background:#9ca3af;animation:ppBounce 1.2s infinite}
.pp-typing span:nth-child(2){animation-delay:.2s}
.pp-typing span:nth-child(3){animation-delay:.4s}
@keyframes ppBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}}

/* ---- Formulaire coordonnées ---- */
.pp-contact-form{
  padding:12px 14px;background:#f8f9fb;border-top:1px solid #e2e6ea;
  display:none;flex-direction:column;gap:8px;
}
.pp-contact-form.show{display:flex}
.pp-contact-form p{font-size:.82rem;color:#5A6473;margin-bottom:2px}
.pp-fc-row{display:flex;gap:8px}
.pp-fc-input{
  flex:1;border:1px solid #e2e6ea;border-radius:8px;padding:8px 10px;
  font-size:.85rem;outline:none;background:#fff;
}
.pp-fc-input:focus{border-color:var(--pp-blue)}
.pp-fc-btn{
  padding:8px 16px;background:var(--pp-blue);color:#fff;
  border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:.85rem;
}
.pp-fc-btn:hover{background:#005fba}
.pp-fc-skip{background:none;border:none;cursor:pointer;color:#9ca3af;font-size:.78rem;text-decoration:underline;align-self:center}

/* ---- Barre de saisie ---- */
.pp-bar{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #e2e6ea}
.pp-bar textarea{
  flex:1;border:1px solid #e2e6ea;border-radius:10px;padding:8px 10px;
  font-size:.88rem;line-height:1.4;resize:none;height:40px;max-height:100px;
  font-family:inherit;outline:none;overflow:hidden;transition:border .2s;
}
.pp-bar textarea:focus{border-color:var(--pp-blue)}
.pp-send{
  width:38px;height:38px;border-radius:10px;background:var(--pp-blue);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  align-self:flex-end;flex-shrink:0;transition:background .15s;
}
.pp-send:hover{background:#005fba}
.pp-send svg{width:18px;height:18px;fill:#fff}
.pp-send:disabled{background:#d1d5db;cursor:not-allowed}

/* ---- Pied ---- */
.pp-foot{
  padding:6px 14px;border-top:1px solid #f0f2f5;
  font-size:.7rem;color:#c0c7cf;text-align:center;
}

/* ---- Responsive ---- */
@media(max-width:420px){
  #pp-chat-win{width:calc(100vw - 16px);right:8px;bottom:78px;max-height:calc(100vh - 100px)}
  #pp-chat-btn{right:16px;bottom:16px}
}