/* Le chat : une bulle sombre en bas à droite, une fenêtre qui monte d'un ressort. Il
   emprunte les jetons du site (jetons.css) pour ne jamais jurer avec la page. */
#maxx-chat { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-family: var(--sans, system-ui); }
/* display:flex ci-dessous l'emporterait sur l'attribut hidden : on le rétablit. */
#maxx-chat [hidden] { display: none !important; }
#maxx-chat .bulle {
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink, #0c1b3d); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35);
  transition: transform var(--ui, 200ms ease), background var(--snap, 120ms ease);
}
#maxx-chat .bulle:hover { transform: translateY(-2px); }
#maxx-chat .bulle.ouverte { transform: scale(0.92); }

#maxx-chat .fenetre {
  position: absolute; right: 0; bottom: 64px; width: min(360px, calc(100vw - 40px));
  background: var(--paper, #fff); border-radius: 20px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 24px 60px -16px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column; max-height: 70vh;
  animation: maxx-chat-monte var(--gentle, 400ms ease) both;
}
@keyframes maxx-chat-monte { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
#maxx-chat header { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line, #e6e1d6); }
#maxx-chat header b { letter-spacing: 0.08em; }
#maxx-chat header b::after { content: "."; color: var(--accent, #1d3fcf); }
#maxx-chat header span { flex: 1; font-size: 12px; color: var(--muted, #888); }
#maxx-chat .fermer { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted, #888); padding: 0 2px; }

#maxx-chat .fil { padding: 14px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
#maxx-chat .fil p { margin: 0; max-width: 85%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; animation: maxx-chat-monte var(--ui, 200ms ease) both; }
#maxx-chat .fil .eux { background: var(--raise, #f0eee8); color: var(--ink, #111); align-self: flex-start; border-bottom-left-radius: 4px; }
#maxx-chat .fil .vous { background: var(--ink, #0c1b3d); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
#maxx-chat .fil .attente { color: var(--muted, #888); }

#maxx-chat form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line, #e6e1d6); }
#maxx-chat form.adresse { flex-wrap: wrap; }
#maxx-chat form.adresse p { flex: 1 0 100%; margin: 0 0 2px; font-size: 13px; color: var(--muted, #888); }
#maxx-chat input { flex: 1; border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; background: var(--paper, #fff); color: inherit; min-width: 0; }
#maxx-chat input:focus { outline: 2px solid var(--accent, #1d3fcf); outline-offset: 1px; border-color: transparent; }
#maxx-chat form button { border: 0; border-radius: 12px; padding: 0 14px; background: var(--ink, #0c1b3d); color: #fff; cursor: pointer; font: inherit; font-size: 14px; }