/* ============================================================
   123Pozicky.eu — pozibot.css
   Bulle d'assistance présente sur tout le site (vitrine, espace client,
   PoziPay). Feuille autonome : chargée partout, y compris sur des pages qui
   n'ont ni app.css ni bank.css.
   ============================================================ */

/* Feuille AUTONOME : la bulle vit sur trois espaces dont les feuilles diffèrent
   (le site vitrine impose « img,svg{max-width:100%} », qui étirait la croix de
   fermeture en carré blanc et décalait le panneau). On fixe donc ici toutes les
   dimensions et le modèle de boîte, sans rien attendre de l'espace hôte. */
.pozibot, .pozibot *{ box-sizing:border-box; }
.pozibot svg{ max-width:none; flex-shrink:0; }

.pozibot{ position:fixed; right:20px; bottom:20px; z-index:70; }

/* Bouton flottant : toujours au même endroit, discret mais repérable. */
.pozibot-fab{
  position:relative;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, var(--pine, #0B4F3C) 0%, var(--green-mid, #2F8F5B) 130%);
  color:#fff; box-shadow:0 14px 30px -10px rgba(7,51,40,.55);
  transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease;
}
.pozibot-fab:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -12px rgba(7,51,40,.65); }
.pozibot-fab svg{ width:25px; height:25px; }
.pozibot-ico-close{ display:none; }
.pozibot.open .pozibot-ico-open{ display:none; }
.pozibot.open .pozibot-ico-close{ display:block; }

/* Compteur de messages non lus : le client voit qu'on lui a répondu même en
   naviguant ailleurs. Pulse discret tant qu'il n'a pas ouvert. */
.pozibot-count{
  position:absolute; top:-3px; right:-3px; min-width:21px; height:21px; padding:0 5px;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  background:#E4736F; color:#fff; font-size:11px; font-weight:700; line-height:1;
  border:2px solid var(--bg, #F6F8F4); border-radius:999px;
}
.pozibot.has-unread .pozibot-fab{ animation:pozibotRing 2.4s ease-in-out infinite; }
@keyframes pozibotRing{
  0%,100%{ box-shadow:0 14px 30px -10px rgba(7,51,40,.55), 0 0 0 0 rgba(228,115,111,.5); }
  50%    { box-shadow:0 14px 30px -10px rgba(7,51,40,.55), 0 0 0 10px rgba(228,115,111,0); }
}

/* Panneau : large mais court — une conversation, pas une page. */
.pozibot-panel{
  position:absolute; right:0; bottom:70px; width:392px; max-width:calc(100vw - 32px);
  display:flex; flex-direction:column; overflow:hidden;
  /* padding:0 — le panneau est un <section>, et le site vitrine pose
     « section{ padding:76px 0 } ». Il héritait donc de 76px de blanc EN HAUT ET
     EN BAS, à l'intérieur de lui-même : les deux bandes visibles uniquement sur
     le site principal, jamais dans l'espace client ni PoziPay dont les feuilles
     n'ont pas cette règle. Même raison que « img,svg{max-width:100%} » plus
     haut : cette feuille n'attend rien de l'espace hôte. */
  padding:0; margin:0;
  background:var(--bg-panel, #fff); border:1px solid var(--line, #DCE5DD); border-radius:18px;
  box-shadow:0 26px 60px -24px rgba(7,51,40,.55);
  animation:pozibotIn .18s cubic-bezier(.2,.7,.2,1);
  /* Jamais plus haut que l'écran, quel que soit l'espace hôte.
     dvh et non vh : sur iPhone, 100vh ignore la barre d'outils de Safari et le
     panneau dépassait l'écran par le bas. */
  max-height:calc(100dvh - 120px);
}

/* ── Questions fréquentes repliables ──
   Sur un téléphone, une dizaine de puces mangeaient toute la hauteur et il ne
   restait presque rien pour lire les réponses. */
.pozibot-faq{ margin-bottom:8px; }
.pozibot-faq-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:7px 2px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint, #8A988E);
}
.pozibot-faq-toggle svg{ width:14px; height:14px; transition:transform .16s ease; }
.pozibot-faq.is-open .pozibot-faq-toggle svg{ transform:rotate(180deg); }
.pozibot-faq [data-faq-list]{ display:none; }
.pozibot-faq.is-open [data-faq-list]{ display:flex; }

/* Contact d'un conseiller : toujours offert, jamais enfoui dans une liste. */
.pozibot-human{
  display:flex; align-items:center; justify-content:center; gap:7px; width:100%;
  margin:0 0 8px; padding:10px 14px; border:1px solid var(--gold, #C9A24B);
  border-radius:999px; background:var(--gold-soft, #FBF3E0);
  font-family:inherit; font-size:12.5px; font-weight:700; text-decoration:none;
  color:var(--status-pending-text, #8A6520); cursor:pointer;
  transition:background .14s ease, transform .14s ease;
}
.pozibot-human:hover{ background:var(--gold, #C9A24B); color:#fff; transform:translateY(-1px); }
@keyframes pozibotIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.pozibot-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:linear-gradient(135deg, var(--surface-deep, #073328) 0%, var(--pine, #0B4F3C) 100%); color:#fff;
}
.pozibot-head svg{ width:19px; height:19px; }

/* ── La couleur du profil de PoziBot ──
   L'équipe peut lui choisir une autre couleur que le vert de la charte. Le
   badge de certification, lui, reste doré : c'est une marque de confiance, pas
   une identité de profil.
   Les deux dégradés sont ASSOMBRIS depuis la teinte choisie, jamais posés tels
   quels : sur un doré vif, le nom écrit en blanc devenait illisible. La
   variable n'est posée par la page que si la couleur diffère du vert — le cas
   courant garde donc exactement le dégradé d'origine, sans color-mix. */
.pozibot[style*="--bot-tint"] .pozibot-fab{
  background:linear-gradient(150deg,
    color-mix(in srgb, var(--bot-tint) 62%, #000) 0%,
    color-mix(in srgb, var(--bot-tint) 92%, #000) 130%);
}
.pozibot[style*="--bot-tint"] .pozibot-head{
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--bot-tint) 50%, #000) 0%,
    color-mix(in srgb, var(--bot-tint) 72%, #000) 100%);
}
/* Réponses du bot : même teinte légère que dans la messagerie en pleine page.
   Seules les siennes — les bulles du client gardent le vert de la marque. */
.pozibot[style*="--bot-tint"] .pozibot-msg:not(.me){
  background:color-mix(in srgb, var(--bot-tint) 13%, var(--bg-panel, #fff));
  border-color:color-mix(in srgb, var(--bot-tint) 32%, var(--bg-panel, #fff));
}
.pozibot-ava{
  width:34px; height:34px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); font-weight:700; font-size:15px;
}
.pozibot-id{ flex:1; min-width:0; line-height:1.25; }
.pozibot-id b{ display:flex; align-items:center; gap:5px; font-size:14.5px; }
.pozibot-id em{ font-style:normal; font-size:11.5px; color:rgba(255,255,255,.6); }
/* Certification : une pastille dorée, sans texte — lisible d'un coup d'œil,
   comme sur les réseaux sociaux. Le libellé reste en infobulle et pour les
   lecteurs d'écran. */
/* Même pastille ronde que dans la messagerie : une seule identité visuelle. */
.pozibot-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex:0 0 18px; color:var(--gold, #C9A24B);
}
.pozibot-badge svg{ width:18px; height:18px; display:block; }

/* Croix de fermeture. Ses dimensions sont imposées ICI : sans règle propre,
   le bouton restait nu et son icône s'étirait — d'où le carré blanc vu dans
   le coin, uniquement sur le site vitrine (« img,svg{max-width:100%} »). */
.pozibot-x{
  width:30px; height:30px; flex-shrink:0; padding:0; margin-left:2px;
  background:none; border:none; border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
}
.pozibot-x:hover{ background:rgba(255,255,255,.14); color:#fff; }
.pozibot-x svg{ width:17px; height:17px; fill:none; stroke:currentColor; }

.pozibot-body{
  flex:1; min-height:96px; max-height:260px; overflow-y:auto;
  padding:13px; display:flex; flex-direction:column; gap:8px;
  background:var(--bg, #F6F8F4);
}
.pozibot-msg{
  max-width:86%; align-self:flex-start; padding:9px 12px; border-radius:14px 14px 14px 4px;
  background:var(--bg-panel, #fff); border:1px solid var(--line, #DCE5DD);
  font-size:13.5px; line-height:1.55; color:var(--ink, #12241C);
  animation:pozibotMsg .18s ease;
}
.pozibot-msg.me{
  align-self:flex-end; border-radius:14px 14px 4px 14px;
  background:var(--pine, #0B4F3C); border-color:transparent; color:#fff;
}
@keyframes pozibotMsg{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

.pozibot-foot{ flex:0 0 auto; padding:11px 13px 13px; border-top:1px solid var(--line, #DCE5DD); background:var(--bg-panel, #fff); }
.pozibot-chips{ display:flex; flex-wrap:wrap; gap:6px; max-height:96px; overflow-y:auto; }
.pozibot-chip{
  border:1px solid var(--line, #DCE5DD); background:var(--bg, #F6F8F4); color:var(--ink, #12241C);
  font-size:12px; font-weight:500; padding:6px 11px; border-radius:999px; cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.pozibot-chip:hover{ border-color:var(--pine, #0B4F3C); background:var(--green-soft, #E4EFE6); }

/* Visiteur : une phrase, puis DEUX boutons de même largeur — s'inscrire, ou se
   connecter s'il a déjà un compte. */
.pozibot-signup-hint{
  margin:10px 0 8px; font-size:11.5px; line-height:1.5; color:var(--ink-soft, #4B5D53); text-align:center;
}
.pozibot-cta{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
/* Action SEULE : pleine largeur, à l'aplomb du bouton « conseiller » juste
   au-dessus. Même convention que .pay-cc-actions.one dans PoziPay. */
.pozibot-cta.one{ grid-template-columns:1fr; }
.pozibot-btn{
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px 12px; border-radius:999px; text-decoration:none;
  font-size:12.5px; font-weight:600; line-height:1.2;
  border:1px solid var(--line, #DCE5DD); background:var(--bg-panel, #fff); color:var(--pine-deep, #073328);
  transition:border-color .14s ease, background .14s ease;
}
.pozibot-btn:hover{ border-color:var(--pine, #0B4F3C); background:var(--green-soft, #E4EFE6); }
.pozibot-btn.primary{
  background:linear-gradient(150deg, var(--pine, #0B4F3C) 0%, var(--green-mid, #2F8F5B) 130%);
  border-color:transparent; color:#fff;
}
.pozibot-btn.primary:hover{ filter:brightness(1.06); }

/* Visiteur : il se présente avant qu'on lui réponde.
   Quatre champs au plus, dont deux sur une ligne — le pied de la bulle mesure
   moins de 200 px de haut, un formulaire en colonne y aurait tout mangé. */
.pozibot-lead{ display:flex; flex-direction:column; gap:7px; }
.pozibot-lead-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.pozibot-lead input{
  width:100%; min-width:0; height:38px; padding:0 13px;
  border:1px solid var(--line, #DCE5DD); border-radius:10px;
  /* 16px : en dessous, iOS zoome la page dès qu'un champ prend le focus. */
  font-size:16px; color:var(--ink, #12241C); background:var(--bg, #F6F8F4);
}
.pozibot-lead input:focus{ outline:none; border-color:var(--pine, #0B4F3C); background:var(--bg-panel, #fff); }
/* Pot de miel : hors écran, jamais masqué par display:none — certains
   automates ignorent les champs invisibles, ce qui viderait le piège. */
.pozibot-hp{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; }
.pozibot-lead-err{ margin:0; font-size:11.5px; line-height:1.4; color:var(--danger, #B3261E); }
.pozibot-lead-note{ margin:0; font-size:10.5px; line-height:1.45; color:var(--ink-soft, #4B5D53); text-align:center; }
.pozibot-lead-skip{
  border:none; background:none; cursor:pointer; padding:2px;
  font-size:11.5px; font-weight:600; color:var(--ink-soft, #4B5D53); text-decoration:underline;
}
.pozibot-lead-skip:hover{ color:var(--pine, #0B4F3C); }

/* Client inscrit : il écrit directement dans la bulle. */
.pozibot-composer{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.pozibot-composer input{
  flex:1; min-width:0; height:38px; padding:0 14px;
  border:1px solid var(--line, #DCE5DD); border-radius:999px;
  /* 16px obligatoire : en dessous, iOS zoome la page à l'ouverture du clavier
     et il faut dézoomer à la main pour atteindre le bouton d'envoi. */
  font-size:16px; color:var(--ink, #12241C); background:var(--bg, #F6F8F4);
}
.pozibot-composer input:focus{ outline:none; border-color:var(--pine, #0B4F3C); background:var(--bg-panel, #fff); }
.pozibot-composer button{
  width:38px; height:38px; flex-shrink:0; border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--pine, #0B4F3C); color:#fff;
}
.pozibot-composer button svg{ width:17px; height:17px; }
.pozibot-composer button:hover{ background:var(--surface-deep, #073328); }

/* Téléphone : la bulle remonte au-dessus de la barre de navigation du bas, et
   le panneau occupe la largeur utile sans jamais déborder. */
@media (max-width:640px){
  .pozibot{ right:14px; left:14px; bottom:calc(84px + env(safe-area-inset-bottom)); pointer-events:none; }
  .pozibot-fab{ margin-left:auto; pointer-events:auto; }
  .pozibot-panel{ position:fixed; right:14px; left:14px; bottom:calc(146px + env(safe-area-inset-bottom)); width:auto; max-width:none; pointer-events:auto; }
  .pozibot-body{ max-height:38vh; }
  .pozibot-chips{ max-height:78px; }
}
/* Écran bas (téléphone couché) : le panneau reste entièrement visible. */
@media (max-height:520px){
  .pozibot-body{ max-height:30vh; }
  .pozibot-chips{ max-height:56px; }
}
@media (prefers-reduced-motion:reduce){
  .pozibot-panel, .pozibot-msg{ animation:none; }
  .pozibot-fab{ transition:none; animation:none; }
}