/* =========================================================================
   Assistant de la vitrine publique — bulle + panneau de discussion.
   Reprend les couleurs du logo definies dans styles.css (--salmon-pink est
   le bleu ABC, --sandy-brown le vert ABC).
   ========================================================================= */

.asst-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.25rem;
  padding: 0 1.1rem;
  border: none;
  border-radius: 999px;
  background: var(--salmon-pink, hsl(199, 89%, 45%));
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 26px hsla(199, 89%, 25%, 0.32);
  transition: transform 0.16s ease, box-shadow 0.16s ease, padding 0.3s ease, gap 0.3s ease;
}

.asst-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px hsla(199, 89%, 25%, 0.38);
}

.asst-fab svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
}

/* --- Repli de la bulle ----------------------------------------------------
   La bulle s'annonce en toutes lettres a l'arrivee sur la page, puis se replie
   sur son icone pour rendre la place au contenu. Le survol la redeploie.

   Le repli passe par la largeur du LIBELLE et non par celle du bouton : une
   largeur « auto » ne s'anime pas, alors qu'une max-width le fait, et le
   bouton suit son contenu tout seul.
   ------------------------------------------------------------------------- */
.asst-fab-label {
  max-width: 12rem;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 0.3s ease, opacity 0.2s ease;
}

.asst-fab.is-compact {
  /* 1,3rem d'icone + 2 x 0,975rem = 3,25rem : la hauteur exactement, donc un
     cercle parfait une fois le libelle retire. */
  padding: 0 0.975rem;
  gap: 0;
}

.asst-fab.is-compact .asst-fab-label {
  max-width: 0;
  opacity: 0;
}

/* Le redeploiement au survol n'a de sens que la ou un curseur existe. Sur un
   ecran tactile, :hover se declenche au toucher et resterait colle apres le
   tap : la bulle repliee y reste repliee. */
@media (hover: hover) {
  .asst-fab.is-compact:hover,
  .asst-fab.is-compact:focus-visible {
    padding: 0 1.1rem;
    gap: 0.5rem;
  }

  .asst-fab.is-compact:hover .asst-fab-label,
  .asst-fab.is-compact:focus-visible .asst-fab-label {
    max-width: 12rem;
    opacity: 1;
  }
}

/* --- Panneau -------------------------------------------------------------- */

.asst-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;
  z-index: 901;
  display: none;
  flex-direction: column;
  width: min(23rem, calc(100vw - 2.5rem));
  height: min(32rem, calc(100vh - 8rem));
  background: #fff;
  border: 1px solid hsl(0, 0%, 90%);
  border-radius: 1rem;
  box-shadow: 0 24px 60px hsla(0, 0%, 0%, 0.2);
  overflow: hidden;
}

.asst-panel.is-open {
  display: flex;
  animation: asstIn 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: bottom right;
}

@keyframes asstIn {
  from { opacity: 0; transform: translateY(14px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}

.asst-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem;
  background: var(--salmon-pink, hsl(199, 89%, 45%));
  color: #fff;
}

.asst-head img {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #fff;
  padding: 2px;
}

.asst-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.asst-head-text strong {
  display: block;
  font-size: 0.92rem;
}

.asst-head-text span {
  display: block;
  font-size: 0.74rem;
  opacity: 0.85;
}

.asst-close {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  border-radius: 0.4rem;
  background: hsla(0, 0%, 100%, 0.16);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.asst-close:hover {
  background: hsla(0, 0%, 100%, 0.28);
}

/* --- Fil ------------------------------------------------------------------ */

.asst-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: hsl(0, 0%, 98%);
}

.asst-msg {
  max-width: 88%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.85rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--eerie-black, hsl(0, 0%, 13%));
  background: #fff;
  border: 1px solid hsl(0, 0%, 91%);
  overflow-wrap: anywhere;
  animation: asstMsg 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.asst-msg.is-mine {
  align-self: flex-end;
  background: var(--salmon-pink, hsl(199, 89%, 45%));
  border-color: transparent;
  color: #fff;
}

@keyframes asstMsg {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Trois points pendant la reflexion */
.asst-typing {
  align-self: flex-start;
  display: none;
  align-items: center;
  gap: 0.28rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.85rem;
  background: #fff;
  border: 1px solid hsl(0, 0%, 91%);
}

.asst-typing.is-active {
  display: flex;
}

.asst-typing span {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--sonic-silver, hsl(0, 0%, 47%));
  animation: asstDots 1.2s ease-in-out infinite;
}

.asst-typing span:nth-child(2) { animation-delay: 0.15s; }
.asst-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes asstDots {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-0.25rem); opacity: 1; }
}

/* --- Fiches livres --------------------------------------------------------- */

.asst-books {
  align-self: flex-start;
  width: 88%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.asst-book {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem;
  border: 1px solid hsl(0, 0%, 91%);
  border-radius: 0.65rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.asst-book:hover {
  border-color: var(--salmon-pink, hsl(199, 89%, 45%));
  transform: translateX(2px);
}

.asst-book-cover {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 3.2rem;
  border-radius: 0.35rem;
  object-fit: cover;
  background: hsl(0, 0%, 94%);
}

.asst-book-text {
  min-width: 0;
  flex: 1 1 auto;
}

.asst-book-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}

.asst-book-meta {
  display: block;
  font-size: 0.72rem;
  color: var(--sonic-silver, hsl(0, 0%, 47%));
}

.asst-book-price {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sandy-brown, hsl(150, 58%, 42%));
}

/* --- Suggestions ----------------------------------------------------------- */

.asst-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.85rem 0.6rem;
  background: hsl(0, 0%, 98%);
}

.asst-suggestions:empty {
  display: none;
}

.asst-chip {
  border: 1px solid hsl(199, 89%, 82%);
  border-radius: 999px;
  background: hsl(199, 89%, 97%);
  color: hsl(199, 89%, 30%);
  font: inherit;
  font-size: 0.76rem;
  padding: 0.32rem 0.65rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.asst-chip:hover {
  background: hsl(199, 89%, 92%);
}

/* --- Saisie ---------------------------------------------------------------- */

.asst-compose {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  border-top: 1px solid hsl(0, 0%, 91%);
  background: #fff;
}

.asst-compose input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.4rem;
  padding: 0 0.7rem;
  border: 1px solid hsl(0, 0%, 87%);
  border-radius: 0.6rem;
  font: inherit;
  font-size: 0.86rem;
}

.asst-compose input:focus-visible {
  outline: none;
  border-color: var(--salmon-pink, hsl(199, 89%, 45%));
  box-shadow: 0 0 0 3px hsla(199, 89%, 45%, 0.18);
}

.asst-send {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border: none;
  border-radius: 0.6rem;
  background: var(--salmon-pink, hsl(199, 89%, 45%));
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.asst-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.asst-send svg {
  width: 1rem;
  height: 1rem;
}

/* --- Formulaire de rappel --------------------------------------------------- */

.asst-callback {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.2rem 0.85rem 0.6rem;
  padding: 0.7rem;
  border: 1px solid hsl(150, 58%, 82%);
  border-radius: 0.7rem;
  background: hsl(150, 58%, 97%);
}

.asst-callback.is-active {
  display: flex;
  animation: asstMsg 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.asst-callback strong {
  font-size: 0.82rem;
  color: hsl(150, 58%, 24%);
}

.asst-callback input {
  height: 2.15rem;
  padding: 0 0.6rem;
  border: 1px solid hsl(150, 30%, 80%);
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.82rem;
}

.asst-callback-actions {
  display: flex;
  gap: 0.4rem;
}

.asst-btn {
  flex: 1 1 auto;
  height: 2.15rem;
  border: none;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.asst-btn-primary {
  background: var(--sandy-brown, hsl(150, 58%, 42%));
  color: #fff;
}

.asst-btn-ghost {
  background: transparent;
  color: hsl(150, 58%, 28%);
  border: 1px solid hsl(150, 30%, 78%);
}

/* --- Cohabitation avec la barre de navigation du bas ----------------------
   La vitrine affiche une barre fixe en bas de l'ecran tant que la fenetre fait
   moins de 1024px (styles.css la masque au-dela). L'assistant se posait a
   1,25rem du bord : il recouvrait donc les onglets sur toute la plage tablette,
   ou seul le palier 560px etait traite.

   Hauteur de la barre : 26px d'icone + 2x10px de bouton + 2x5px de barre = 56px
   (3,5rem). On ajoute l'encoche des ecrans a bord arrondi, que la barre ne
   prend pas en compte elle-meme.
   ------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .asst-fab {
    /* 3,5rem de barre + 0,75rem de respiration */
    bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
  }

  .asst-panel {
    /* au-dessus de la bulle : 4,25 + 3,25 (hauteur bulle) + 0,75 */
    bottom: calc(8.25rem + env(safe-area-inset-bottom, 0px));
    height: min(30rem, calc(100vh - 11rem));
    /* Sur mobile, 100vh ignore le clavier : le champ de saisie se retrouve
       dessous, invisible pendant qu'on ecrit. 100dvh suit la zone reellement
       visible. La ligne precedente reste pour les navigateurs sans dvh. */
    height: min(30rem, calc(100dvh - 11rem));
  }
}

/* Sur petit ecran, le panneau prend toute la largeur et la bulle se reduit a
   son icone : le libelle mangerait la moitie de la ligne. */
@media (max-width: 560px) {
  .asst-panel {
    right: 0.6rem;
    left: 0.6rem;
    width: auto;
  }

  .asst-fab {
    right: 0.9rem;
  }

  .asst-fab-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .asst-panel,
  .asst-msg,
  .asst-typing span,
  .asst-callback,
  .asst-fab,
  .asst-book {
    animation: none !important;
    transition: none !important;
  }
}