/* L'assistant de contact : le bouton flottant, le panneau de conversation, le fil des messages,
 * la zone de saisie et l'accroche qui invite à ouvrir.
 *
 * Chargée par le widget lui-même, donc présente sur les seules pages qui l'incluent. Aucune de ses
 * valeurs ne vient de `base.css` : le widget se dessine seul, au-dessus de la page qui le porte.
 */

.bnm-asi-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 60px; height: 60px;
  border-radius: 50%; border: none; cursor: pointer; background: #4338ca; color: #fff;
  box-shadow: 0 8px 24px rgba(67, 56, 202, .4); display: grid; place-items: center;
  transition: transform .12s ease }
.bnm-asi-fab:hover { transform: translateY(-2px) }
.bnm-asi-fab svg { width: 26px; height: 26px }

.bnm-asi-panel { position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 40px)); background: #fff;
  border: 1px solid #e6e3dd; border-radius: 18px; box-shadow: 0 24px 60px rgba(20, 26, 46, .24);
  display: none; flex-direction: column; overflow: hidden }
.bnm-asi-panel.bnm-asi-open { display: flex }
/* Le panneau ouvert prend la place de la pastille : l'une remplace l'autre au même coin. Le
   contrôleur pose `data-open` sur l'enveloppe, la feuille peint — aucune règle n'est écrite
   depuis le JavaScript. */
.bnm-asi[data-open] .bnm-asi-fab { display: none }

.bnm-asi-head { background: #4338ca; color: #fff; padding: 14px 16px; display: flex;
  align-items: center; gap: 10px }
.bnm-asi-head b { font-size: .98rem }
.bnm-asi-head small { display: block; font-size: .72rem; opacity: .8; font-weight: 400 }
.bnm-asi-reset { margin-left: auto; background: transparent; border: none; color: #fff;
  cursor: pointer; font-size: 1.05rem; line-height: 1; opacity: .8; padding: 2px 6px }
.bnm-asi-reset:hover { opacity: 1 }
.bnm-asi-close { background: transparent; border: none; color: #fff; cursor: pointer;
  font-size: 1.3rem; line-height: 1; opacity: .85 }

.bnm-asi-body { flex: 1; overflow-y: auto; padding: 16px; background: #faf9f7; display: flex;
  flex-direction: column; gap: 10px }
.bnm-asi-msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: .93rem;
  line-height: 1.45; white-space: pre-wrap }
.bnm-asi-msg.bnm-asi-bot { background: #fff; border: 1px solid #e6e3dd; align-self: flex-start;
  border-bottom-left-radius: 4px }
.bnm-asi-msg.bnm-asi-me { background: #4338ca; color: #fff; align-self: flex-end;
  border-bottom-right-radius: 4px }
.bnm-asi-msg.bnm-asi-wait { color: #6b7280; font-style: italic }
.bnm-asi-msg a { color: #4338ca; text-decoration: underline }
.bnm-asi-msg.bnm-asi-me a { color: #fff }

.bnm-asi-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e6e3dd;
  background: #fff }
.bnm-asi-foot textarea { flex: 1; resize: none; border: 1px solid #e6e3dd; border-radius: 10px;
  padding: 9px 11px; font: inherit; font-size: .93rem; max-height: 90px; outline: none }
.bnm-asi-foot textarea:focus { border-color: #4338ca }
.bnm-asi-send { background: #4338ca; color: #fff; border: none; border-radius: 10px;
  padding: 0 15px; cursor: pointer; font-weight: 600 }
.bnm-asi-send:disabled { opacity: .5; cursor: default }
.bnm-asi-note { font-size: .72rem; color: #6b7280; text-align: center; padding: 0 12px 10px;
  background: #fff }
.bnm-asi-note a { color: #4338ca }

/* Accroche discrète après un temps sur la page — invite à ouvrir, n'ouvre pas de force. */
.bnm-asi-teaser { position: fixed; right: 20px; bottom: 92px; z-index: 59; max-width: 250px;
  background: #fff; color: #141a2e; border: 1px solid #e6e3dd; border-radius: 14px;
  padding: 12px 32px 12px 14px; font-size: .9rem; line-height: 1.4;
  box-shadow: 0 12px 32px rgba(20, 26, 46, .18); cursor: pointer; display: none }
.bnm-asi-teaser.bnm-asi-show { display: block; animation: bn-pop .25s ease }
.bnm-asi-teaser-x { position: absolute; top: 5px; right: 7px; background: transparent; border: none;
  font-size: 1.15rem; line-height: 1; color: #9aa0ab; cursor: pointer; padding: 0 }
@keyframes bn-pop { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Mobile : le panneau prend tout l'écran (viewport dynamique pour la barre du navigateur). */
@media (max-width: 520px) {
  .bnm-asi-panel { right: 0; bottom: 0; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh;
    max-width: none; border: none; border-radius: 0 }
  .bnm-asi-teaser { bottom: 88px; left: auto; max-width: 70vw }
}