/* ============================================================================
   L'ASSISTANT EN BULLE — clone de mew_dash/bulle-assistant.html
   ============================================================================

   La bulle en bas à droite, et son panneau de conversation.

   Les valeurs sont celles de la maquette, à la virgule près. Seuls les noms
   de classe changent : elle dit `.dock`, `.chat`, `.msg`, `.chip`, `.hit`,
   `.bar` — des mots trop courants pour être lâchés dans une application qui
   porte déjà Bootstrap, et dont plusieurs existent déjà ici (`.chip` a ses
   propres règles dans la feuille du tableau de bord, `.bar` aussi). Tout est
   préfixé `bai-`.

   Le panneau est ANCRÉ, jamais modal : on continue de lire la page derrière.
   ============================================================================ */

/* LA LIGATURE A BESOIN DE SA FONTE.
   Le gabarit public charge Material Symbols, mais aucune feuille n'y POSE
   `.ico` — cette règle vit dans la feuille du tableau de bord, que les pages
   publiques ne chargent pas. Sans elle, « auto_awesome » s'écrivait en
   toutes lettres dans la bulle : on lisait « awe ».

   Sous `#bai` : le tableau de bord a sa propre définition de `.ico`, et deux
   règles concurrentes sur le même nom finiraient par se contredire. */
#bai .ico {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ---------- la bulle ---------- */
.bai-dock {
  position: fixed; right: clamp(16px,2.5vw,26px); bottom: clamp(16px,2.5vw,26px); z-index: 40;
  display: inline-flex; align-items: center; gap: 0;
  height: 62px; width: 62px; padding: 0; border: 0; border-radius: 999px;
  background: linear-gradient(38deg,#FFBCBC 0%,#FF6363 54%); color: #fff;
  font-family: inherit; font-size: 15.5px; font-weight: 900; letter-spacing: -.02em;
  text-shadow: 0 1px 2px rgba(150,30,30,.55); white-space: nowrap; overflow: hidden;
  box-shadow: 0 18px 34px -14px rgba(255,99,99,.85); cursor: pointer;
  animation: baiDockIn .48s cubic-bezier(.34,1.56,.64,1) .2s both;
  transition: width .36s cubic-bezier(.22,.9,.24,1), gap .36s cubic-bezier(.22,.9,.24,1),
              padding .36s cubic-bezier(.22,.9,.24,1), box-shadow .3s ease, opacity .2s ease, transform .3s ease;
}
@keyframes baiDockIn { from { opacity: 0; transform: translateY(16px) scale(.8); } to { opacity: 1; transform: none; } }
.bai-dock::after { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(255,99,99,.5); animation: baiHalo 2.6s ease-out .8s infinite; }
@keyframes baiHalo { 0% { box-shadow: 0 0 0 0 rgba(255,99,99,.45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(255,99,99,0); } }
.bai-dock:hover { width: 196px; gap: 11px; padding: 0 22px; box-shadow: 0 24px 42px -14px rgba(255,99,99,.9); }
.bai-dock:hover::after { animation: none; }
.bai-dock:focus-visible { outline: 3px solid #1C1C1E; outline-offset: 3px; }
.bai-dock .sp { flex: 0 0 auto; width: 62px; font-size: 27px; display: inline-flex; align-items: center; justify-content: center; animation: baiFloat 3.2s ease-in-out infinite; transition: width .36s cubic-bezier(.22,.9,.24,1), font-size .3s ease; }
.bai-dock:hover .sp { width: auto; font-size: 22px; }
@keyframes baiFloat { 0%,100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-3px) rotate(-10deg); } 70% { transform: translateY(1px) rotate(7deg); } }
.bai-dock .lb { opacity: 0; transform: translateX(-6px); transition: opacity .2s ease .06s, transform .3s cubic-bezier(.22,.9,.24,1) .06s; }
.bai-dock:hover .lb { opacity: 1; transform: none; }
.bai-dock.is-away { opacity: 0; transform: translateY(10px) scale(.85); pointer-events: none; }
@media (hover: none) { .bai-dock:hover { width: 62px; gap: 0; padding: 0; } .bai-dock .lb { display: none; } }

/* ---------- le panneau de conversation ----------
   Ancré à droite, il ne masque pas la page : on peut continuer à lire. */
.bai-chat {
  position: fixed; right: clamp(12px,2vw,22px); bottom: clamp(12px,2vw,22px); z-index: 50;
  width: min(392px, calc(100vw - 24px)); height: min(640px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  border-radius: 28px; background: #fff; overflow: hidden;
  box-shadow: 0 34px 70px -24px rgba(20,10,10,.45), 0 0 0 1.5px #F0EBE7;
  transform-origin: 100% 100%;
  animation: baiChatIn .38s cubic-bezier(.22,.9,.24,1) both;
}
@keyframes baiChatIn { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
.bai-chat.is-out { animation: baiChatOut .24s cubic-bezier(.4,0,1,1) both; }
@keyframes baiChatOut { to { opacity: 0; transform: translateY(16px) scale(.94); } }
.bai-chat[hidden] { display: none; }

/* ---------- SUR TÉLÉPHONE : PLEIN ÉCRAN ----------

   Le panneau gardait ses marges et ses angles arrondis, et laissait voir
   la page derrière : on ne savait plus si on était dans la conversation ou
   sur le site, et la zone de saisie se retrouvait coincée entre le clavier
   et le bord. En plein écran, la conversation est le seul objet à l'écran,
   et le champ reste au-dessus du clavier.

   `100dvh` et non `100vh` : sur mobile, `vh` compte la barre d'adresse
   comme si elle n'existait pas, et le bas du panneau passe sous elle.
   `dvh` suit la hauteur réellement visible. `100vh` reste en repli pour
   les navigateurs qui ignorent `dvh`. */
@media (max-width: 767px) {
  .bai-chat {
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    transform-origin: 50% 100%;
  }

  /* L'en-tête gagne de l'air : c'est lui qui porte la sortie. */
  .bai-head {
    padding: 16px 16px 14px;
  }

  /* La croix de fermeture, franche.

     À 36 px sur un fond `#F5F2EF` qui ne se détache que de 1,13:1 du blanc,
     elle se lisait comme un ornement. Ici c'est la seule façon de quitter
     la conversation : elle doit se voir du premier coup d'œil. */
  .bai-hbtn {
    width: 42px;
    height: 42px;
    background: #F1E9E5;
    box-shadow: inset 0 0 0 1.5px rgba(28, 28, 30, 0.14);
  }

  .bai-hbtn .ico {
    font-size: 23px;
    font-weight: 600;
  }

  .bai-hbtn.x {
    background: #1C1C1E;
    color: #fff;
    box-shadow: none;
  }
}

/* en-tête : l'orbe respire, comme la bulle */
.bai-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-bottom: 1.5px solid #F5F2EF; }
.bai-orb { flex: 0 0 auto; position: relative; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #FFD9D9 0%, #FFBCBC 38%, #FF6363 78%, #E14A4A 100%); box-shadow: 0 10px 20px -8px rgba(255,99,99,.85); animation: baiBreathe 3.4s ease-in-out infinite; }
.bai-orb::after { content: ""; position: absolute; left: 24%; top: 18%; width: 30%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.75); filter: blur(2px); }
@keyframes baiBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.bai-head .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bai-head .tt b { font-size: 16px; font-weight: 900; letter-spacing: -.025em; }
.bai-head .tt span { font-size: 12.5px; font-weight: 800; color: #1E9E63; }
.bai-hbtn { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #F5F2EF; color: #1C1C1E; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .16s, color .16s, transform .2s cubic-bezier(.22,.9,.24,1); }
.bai-hbtn:hover { background: #FFF1F1; color: #C0392B; }
.bai-hbtn.x:hover { transform: rotate(90deg); }
.bai-hbtn:focus-visible { outline: 3px solid #1C1C1E; outline-offset: 2px; }
.bai-hbtn .ico { font-size: 20px; }

/* ---------- accueil : la sphère avant la conversation ---------- */
.bai-intro { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 20px 22px 8px; text-align: center; animation: baiMsgIn .4s cubic-bezier(.22,.9,.24,1) both; }
.bai-intro[hidden] { display: none; }
.bai-face { position: relative; width: 128px; height: 128px; flex: 0 0 auto; }
/* la bulle salue, puis reste : elle donne vie à la sphère sans bouger la mise en page */
.bai-hello { position: absolute; left: -22px; top: -6px; z-index: 2; padding: 9px 15px; border-radius: 18px 18px 18px 5px; background: #fff; color: #1C1C1E; font-size: 14.5px; font-weight: 900; white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(60,30,25,.5); animation: baiHelloIn .5s cubic-bezier(.34,1.56,.64,1) .35s both; }
@keyframes baiHelloIn { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }

.bai-sphere { display: block; position: relative; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle at 34% 26%, #FFF0F0 0%, #FFD0D0 22%, #FFA3A3 48%, #FF6363 74%, #D93B3B 100%); box-shadow: 0 26px 48px -18px rgba(255,99,99,.75), inset -8px -14px 28px rgba(190,50,50,.35); animation: baiHover 4.2s ease-in-out infinite; }
.bai-sphere::before { content: ""; position: absolute; left: 22%; top: 15%; width: 34%; height: 25%; border-radius: 50%; background: rgba(255,255,255,.85); filter: blur(4px); }
.bai-sphere::after { content: ""; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: 76%; height: 16px; border-radius: 50%; background: rgba(255,99,99,.28); filter: blur(9px); animation: baiShade 4.2s ease-in-out infinite; }
@keyframes baiHover { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.02); } }
@keyframes baiShade { 0%,100% { opacity: .5; transform: translateX(-50%) scaleX(1); } 50% { opacity: .26; transform: translateX(-50%) scaleX(.82); } }
.bai-intro .hi { margin-top: 34px; font-size: 16px; font-weight: 800; color: #C0392B; }
.bai-intro .q { margin-top: 2px; font-size: clamp(25px,6vw,32px); font-weight: 900; letter-spacing: -.04em; line-height: 1.15; text-wrap: pretty; }
.bai-intro .sub { margin-top: 7px; font-size: 14.5px; font-weight: 700; color: #5F5E64; text-wrap: pretty; }

/* fil de discussion */
.bai-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: #E4DFDB transparent; }
.bai-thread[hidden] { display: none; }
.bai-thread::-webkit-scrollbar { width: 6px; }
.bai-thread::-webkit-scrollbar-thumb { background: #E4DFDB; border-radius: 999px; }

.bai-msg { max-width: 86%; padding: 12px 15px; font-size: 15px; font-weight: 700; line-height: 1.5; text-wrap: pretty; animation: baiMsgIn .3s cubic-bezier(.22,.9,.24,1) both; }
@keyframes baiMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bai-msg.bot { align-self: flex-start; border-radius: 20px 20px 20px 6px; background: #F7F4F2; color: #1C1C1E; }
.bai-sign { align-self: flex-start; display: flex; align-items: center; gap: 8px; margin: 4px 0 -4px; animation: baiMsgIn .3s cubic-bezier(.22,.9,.24,1) both; }
.bai-sign .mini { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #FFE0E0 0%, #FFBCBC 36%, #FF6363 76%, #D93B3B 100%); }
.bai-sign b { font-size: 13px; font-weight: 900; letter-spacing: -.01em; }
.bai-sign span { font-size: 12.5px; font-weight: 700; color: #5F5E64; }
.bai-msg.me { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: linear-gradient(38deg,#FFBCBC 0%,#FF6363 54%); color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(150,30,30,.5); }
.bai-msg b { font-weight: 900; }
.bai-num { font-variant-numeric: tabular-nums; }

/* l'assistant réfléchit */
.bai-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: #F7F4F2; }
.bai-typing i { width: 7px; height: 7px; border-radius: 50%; background: #C9BFB8; animation: baiBlink 1.3s ease-in-out infinite; }
.bai-typing i:nth-child(2) { animation-delay: .18s; }
.bai-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes baiBlink { 0%,100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- suggestions ----------
   `flex: 0 0 auto` : sans lui, la rangée se comprime quand le fil s'allonge,
   et les pastilles se coupent. */
.bai-chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 4px 14px 14px; max-height: 42%; overflow-y: auto; scrollbar-width: none; animation: baiMsgIn .3s cubic-bezier(.22,.9,.24,1) both; }
.bai-chips::-webkit-scrollbar { width: 0; height: 0; }
.bai-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff;
  color: #1C1C1E; font-family: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1.5px #EDE7E3;
  transition: transform .2s cubic-bezier(.22,.9,.24,1), box-shadow .22s ease, background .22s ease, color .18s ease;
}
.bai-chip:hover { transform: translateY(-2px); color: #fff; background: linear-gradient(38deg,#FFBCBC 0%,#FF6363 54%); box-shadow: 0 14px 24px -14px rgba(255,99,99,.9); text-shadow: 0 1px 2px rgba(150,30,30,.5); }
.bai-chip:active { transform: translateY(0) scale(.97); }
.bai-chip:focus-visible { outline: 3px solid #1C1C1E; outline-offset: 2px; }

/* résultats dans le fil */
.bai-hits { display: flex; flex-direction: column; gap: 8px; width: 100%; animation: baiMsgIn .34s cubic-bezier(.22,.9,.24,1) both; }
.bai-hit { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px; border-radius: 18px; background: #F9F7F5; cursor: pointer; text-decoration: none; color: inherit; transition: background .18s, transform .18s cubic-bezier(.22,.9,.24,1); }
.bai-hit:hover { background: #F2EFEC; transform: translateY(-2px); color: inherit; }
.bai-hit:focus-visible { outline: 3px solid #1C1C1E; outline-offset: 2px; }
.bai-av { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; background: repeating-linear-gradient(45deg,#EFE0DB 0 8px,#E6D4CE 8px 16px); overflow: hidden; }
.bai-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bai-hit .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bai-hit .who b { font-size: 15px; font-weight: 900; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bai-hit .who span { font-size: 12.5px; font-weight: 700; color: #5F5E64; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bai-hit .pr { flex: 0 0 auto; font-size: 14px; font-weight: 900; color: #C0392B; }

/* barre de saisie */
.bai-bar { display: flex; align-items: flex-end; gap: 9px; padding: 12px 14px 14px; border-top: 1.5px solid #F5F2EF; background: #FCFBFA; }
.bai-bar .field { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 65px; padding: 0 20px; border: 1.5px solid #EDE7E3; border-radius: 26px; background: #fff; transition: border-color .18s; }
.bai-bar .field:focus-within { border-color: #FF6363; }
.bai-bar input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; outline: none; font-family: inherit; font-size: 16px; font-weight: 700; color: #1C1C1E; }
.bai-bar input::placeholder { color: #8A8890; }
.bai-send { flex: 0 0 auto; width: 65px; height: 65px; border: 0; border-radius: 50%; background: linear-gradient(38deg,#FFBCBC 0%,#FF6363 54%); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 12px 22px -10px rgba(255,99,99,.9); transition: transform .2s cubic-bezier(.22,.9,.24,1), opacity .2s; }
.bai-send:hover { transform: translateY(-2px); }
.bai-send[disabled] { background: #EAE4E0; color: #A9A5A0; box-shadow: none; cursor: not-allowed; transform: none; }
.bai-send:focus-visible { outline: 3px solid #1C1C1E; outline-offset: 2px; }
.bai-send .ico { font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  .bai-dock, .bai-dock::after, .bai-dock .sp, .bai-chat, .bai-orb, .bai-sphere, .bai-sphere::after,
  .bai-hello, .bai-msg, .bai-sign, .bai-typing i, .bai-chips, .bai-hits, .bai-chip, .bai-hit, .bai-send {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}