/* ═══════════ II_FIL_v1 — styles greffés sur le widget du chat ═══════════
   Tout est préfixé ii-fil et vit à l'intérieur de #pn-chat : aucun autre
   élément du site n'est touché.
   ═══════════════════════════════════════════════════════════════════ */

#pn-chat .ii-fil-m{
  max-width:86%;margin:0 0 10px;padding:10px 13px;border-radius:14px;
  font-size:14px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;
  animation:iiFilPop .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes iiFilPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* le conseiller */
#pn-chat .ii-fil-m.staff{
  background:linear-gradient(135deg,#1c1914,#141210);color:#fff;
  border:1px solid rgba(201,168,76,.35);border-bottom-left-radius:5px;
  margin-right:auto;box-shadow:0 6px 18px -10px rgba(0,0,0,.5);
}
#pn-chat .ii-fil-m.staff a{color:#E6C25A}
#pn-chat .ii-fil-qui{
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:#C9A23A;margin-bottom:5px;font-weight:700;
}

/* le client */
#pn-chat .ii-fil-m.moi{
  background:#C9A23A;color:#141210;margin-left:auto;
  border-bottom-right-radius:5px;font-weight:500;
}

/* messages de service */
#pn-chat .ii-fil-m.sys{
  background:#f6f3ec;color:#4a453c;border:1px solid rgba(201,162,58,.28);
  font-size:13px;max-width:100%;
}
#pn-chat .ii-fil-m.err{
  background:#fdf3f3;color:#b32d2e;border:1px solid #f0c9c9;font-size:13px;max-width:100%;
}

/* bandeau « un conseiller a rejoint » */
#pn-chat .ii-fil-band{
  display:flex;align-items:center;gap:9px;margin:6px 0 12px;padding:9px 12px;
  background:rgba(201,162,58,.1);border:1px solid rgba(201,162,58,.32);
  border-radius:11px;font-size:12.5px;color:#5c5343;line-height:1.4;
}
#pn-chat .ii-fil-pt{
  flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#1a9d52;
  box-shadow:0 0 0 0 rgba(26,157,82,.6);animation:iiFilPuls 2s infinite;
}
@keyframes iiFilPuls{
  0%{box-shadow:0 0 0 0 rgba(26,157,82,.55)}
  70%{box-shadow:0 0 0 9px rgba(26,157,82,0)}
  100%{box-shadow:0 0 0 0 rgba(26,157,82,0)}
}

/* la barre de saisie change de peau quand on parle à un humain */
#pn-chat-box.ii-fil-on .pn-c-bas{
  background:linear-gradient(0deg,rgba(201,162,58,.08),transparent);
  border-top:1px solid rgba(201,162,58,.3);
}
#pn-chat-box.ii-fil-on #pn-c-in{font-weight:500}

/* pastille sur la bulle fermée */
#pn-chat-bulle{position:relative}
#pn-chat .ii-fil-badge{
  position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;padding:0 6px;
  display:flex;align-items:center;justify-content:center;
  background:#d63638;color:#fff;border:2px solid #fff;border-radius:99px;
  font-size:11px;font-weight:700;line-height:1;
  animation:iiFilPop .3s both, iiFilSaut 1.6s .3s infinite;
}
@keyframes iiFilSaut{
  0%,100%{transform:translateY(0)}
  12%{transform:translateY(-4px)}
  24%{transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  #pn-chat .ii-fil-m,#pn-chat .ii-fil-badge,#pn-chat .ii-fil-pt{animation:none!important}
}