/* ─────────────────────────────────────────────────────────────
 * JuridCI — widget assistant (bulle flottante)
 * Autonome. Même système de design que le site : bleu marine & or,
 * Familjen Grotesk / Public Sans, rayon 8px unique.
 * ───────────────────────────────────────────────────────────── */

#jci-chat{
  --jci-vert:#0A0E0C;
  --jci-vert-nuit:#1D241F;
  --jci-vert-clair:#EDF6E6;
  --jci-craie:#F0F1EE;
  --jci-surface:#fff;
  --jci-encre:#101412;
  --jci-muted:#555B57;
  --jci-ligne:#DCDFDA;
  --jci-ligne-forte:#8A918C;
  --jci-vert-rgb:10,14,12; --jci-encre-rgb:16,20,18;
  --jci-r:8px;
  --jci-ease:cubic-bezier(.2,.6,.2,1);
  font-family:'Public Sans',system-ui,-apple-system,sans-serif;
}
/* :where() → spécificité 0 : la remise à zéro ne doit pas écraser les padding des classes ci-dessous */
:where(#jci-chat) *,:where(#jci-chat) *::before,:where(#jci-chat) *::after{box-sizing:border-box;margin:0;padding:0}

/* ── Lanceur ── */
#jci-chat-launch{
  position:fixed;right:20px;bottom:20px;z-index:9998;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:var(--jci-vert);color:#fff;
  display:flex;align-items:flex-start;justify-content:center;overflow:visible;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 6px 20px rgba(var(--jci-encre-rgb),.22); /* liseré : reste visible sur les blocs noirs */
  transition:background var(--jci-ease) .15s,transform var(--jci-ease) .15s;
}
#jci-chat-launch:hover{background:var(--jci-vert-nuit)}
@media (hover:hover) and (pointer:fine){
  #jci-chat-launch:hover{transform:translateY(-1px)}
}
#jci-chat-launch:active{transform:translateY(0)}
#jci-chat-launch .jci-launch-img{
  width:56px;height:56px;object-fit:contain;
  transform:translateY(-8px);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.28));
  pointer-events:none;
}
#jci-chat-launch .jci-online{
  position:absolute;right:4px;bottom:4px;width:12px;height:12px;border-radius:50%;
  background:#3DDC84;border:2px solid var(--jci-vert);
}
#jci-chat-launch:hover .jci-online{border-color:var(--jci-vert-nuit)}
#jci-chat.open #jci-chat-launch{display:none}

/* Repli sans mascotte : icône de discussion, pas d'avatars (donc pas de colonne vide) */
.jci-launch-ico{display:none;align-items:center;justify-content:center;width:100%;height:100%}
.jci-launch-ico svg{width:28px;height:28px}
#jci-chat.jci-no-hedji .jci-launch-ico{display:flex}
#jci-chat.jci-no-hedji .jci-launch-img,
#jci-chat.jci-no-hedji .jci-avatar,
#jci-chat.jci-no-hedji .jci-av{display:none}

/* ── Fenêtre ── */
#jci-chat-panel{
  position:fixed;right:20px;bottom:20px;z-index:9999;
  width:360px;height:480px;max-height:calc(100dvh - 40px);
  background:var(--jci-surface);border:1px solid var(--jci-ligne);
  border-radius:var(--jci-r);overflow:hidden;
  box-shadow:0 16px 56px rgba(var(--jci-encre-rgb),.20);
  display:none;flex-direction:column;
}
#jci-chat.open #jci-chat-panel{
  display:flex;
  animation:jci-in .2s var(--jci-ease);
}
@keyframes jci-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── En-tête ── */
.jci-head{
  background:var(--jci-vert);color:#fff;
  padding:14px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.jci-head .jci-avatar{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;
  background:rgba(255,255,255,.15);
}
.jci-head-txt{flex:1;min-width:0}
.jci-head-txt strong{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:600;font-size:.9375rem;display:block;letter-spacing:-.01em}
.jci-head-txt span{font-size:.75rem;color:rgba(255,255,255,.8)}
.jci-close{
  width:30px;height:30px;border-radius:var(--jci-r);border:none;cursor:pointer;flex-shrink:0;
  background:transparent;color:rgba(255,255,255,.85);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--jci-ease) .13s;
}
.jci-close:hover{background:rgba(255,255,255,.14);color:#fff}

/* ── Messages ── */
.jci-msgs{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:10px;
  background:var(--jci-surface);
}
.jci-msg{
  max-width:85%;padding:9px 12px;border-radius:var(--jci-r);
  font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;
}
.jci-msg.bot{background:var(--jci-craie);border:1px solid var(--jci-ligne);color:var(--jci-encre)}
.jci-msg.user{align-self:flex-end;background:var(--jci-vert);color:#fff;max-width:80%}

/* Rangée bot : avatar Hedji + bulle */
.jci-brow{
  align-self:flex-start;display:flex;align-items:flex-end;gap:8px;max-width:92%;
}
.jci-brow .jci-msg{max-width:100%}
.jci-av{
  width:28px;height:28px;border-radius:50%;border:2px solid #fff;
  object-fit:cover;flex-shrink:0;background:var(--jci-craie);
  box-shadow:0 1px 3px rgba(var(--jci-encre-rgb),.12);
}

.jci-typing{
  background:var(--jci-craie);border:1px solid var(--jci-ligne);
  border-radius:var(--jci-r);padding:11px 14px;display:flex;gap:4px;
}
.jci-typing i{width:6px;height:6px;border-radius:50%;background:var(--jci-ligne-forte);animation:jci-blink 1.2s var(--jci-ease) infinite}
.jci-typing i:nth-child(2){animation-delay:.2s}
.jci-typing i:nth-child(3){animation-delay:.4s}
@keyframes jci-blink{0%,100%{opacity:.3}50%{opacity:1}}

/* ── Suggestions ── */
.jci-suggs{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.jci-sugg{
  border:1px solid var(--jci-ligne-forte);border-radius:var(--jci-r);
  background:var(--jci-surface);color:var(--jci-encre);
  padding:7px 12px;font:500 .8125rem 'Public Sans',sans-serif;cursor:pointer;
  transition:background var(--jci-ease) .13s,border-color var(--jci-ease) .13s;
}
.jci-sugg:hover{background:var(--jci-vert-clair);border-color:var(--jci-vert)}

/* ── Saisie ── */
.jci-form{
  display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--jci-ligne);
  background:var(--jci-surface);flex-shrink:0;
}
.jci-form textarea{
  flex:1;resize:none;border:1px solid var(--jci-ligne);border-radius:var(--jci-r);
  padding:9px 12px;font:400 .875rem 'Public Sans',sans-serif;color:var(--jci-encre);
  background:var(--jci-surface);outline:none;line-height:1.4;
  height:40px;min-height:40px;max-height:96px;overflow-y:auto;
  transition:border-color var(--jci-ease) .13s;
}
.jci-form textarea:focus{border-color:var(--jci-vert);box-shadow:0 0 0 3px rgba(var(--jci-vert-rgb),.15)}
.jci-send{
  width:40px;height:40px;border-radius:var(--jci-r);border:none;cursor:pointer;flex-shrink:0;
  background:var(--jci-vert);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background var(--jci-ease) .13s;
}
.jci-send:hover{background:var(--jci-vert-nuit)}
.jci-send:disabled{opacity:.45;cursor:default}
.jci-send svg{width:16px;height:16px}

/* ── Barre WhatsApp ── */
.jci-wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px;border-top:1px solid var(--jci-ligne);background:var(--jci-surface);
  font:600 .8125rem 'Public Sans',sans-serif;color:#0F7A3D;text-decoration:none;flex-shrink:0;
  transition:background var(--jci-ease) .13s;
}
.jci-wa:hover{background:#EAF6EE}
.jci-wa svg{width:18px;height:18px}

/* ── Cohabitation avec le bouton WhatsApp flottant du site ── */
/*   Le lanceur du chat prend le coin bas-droite ; on remonte le WhatsApp. */
.wa,.wa-float{bottom:88px!important}
/*   Place réservée en bas de page : le dernier bouton (Suivant, Payer) ne passe jamais sous les flottants. */
body:has(#jci-chat){padding-bottom:140px}

/* ── Mobile ── */
@media (max-width:440px){
  .wa,.wa-float{bottom:82px!important;right:16px!important}
  #jci-chat-panel{
    right:12px;bottom:12px;left:12px;width:auto;
    height:min(72dvh,520px);
  }
  #jci-chat-launch{right:12px;bottom:12px;width:48px;height:48px}
  #jci-chat-launch .jci-launch-img{width:48px;height:48px;transform:translateY(-6px)}
  .wa,.wa-float{right:12px!important;bottom:72px!important}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  #jci-chat.open #jci-chat-panel{animation:none}
  .jci-typing i{animation:none;opacity:.6}
  #jci-chat-launch{transition:none}
}

/* Information de confidentialité affichée à l'ouverture */
#jci-chat .jci-notice{margin:2px 0 8px 36px;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:8px;font-size:.75rem;line-height:1.45;color:#445}
#jci-chat .jci-notice a{color:#177A43;text-decoration:underline}

/* Hedji : l'image est un buste ; on recadre sur le visage et les épaules (si object-view-box n'est pas géré, l'image entière s'affiche) */
.jci-av,.jci-head .jci-avatar{object-view-box:inset(0 20% 40% 20%)}