/* Assistant Menuiserie Mertens : styles du chatbot (js/chatbot.js construit tout le markup).
   Vert #00D623 (texte dessus #141414), anthracite #1E1F22, sable #F5F1EB, gris #45464A. Coins carrés, sauf le lanceur rond.
   Zone réservée : au-dessus du lanceur, jusqu'à bottom: 96px, pour le bouton téléphone posé par l'intégrateur. */
.mmc, .mmc * { box-sizing: border-box; }
.mmc { font-family: inherit; font-size: 16px; line-height: 1.45; color: #1E1F22; }
.mmc button, .mmc textarea, .mmc a { font-family: inherit; }
.mmc p { margin: 0; }
.mmc [hidden] { display: none !important; }
.mmc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- avatar (clin d'œil comme l'Usine) ---- */
.mmc-ava { display: block; flex: none; }
.mmc-oeil-g, .mmc-oeil-d { transform-box: fill-box; transform-origin: center; }
.mmc-oeil-g { animation: mmcCligne 4.5s infinite; }
.mmc-oeil-d { animation: mmcClin 4.5s infinite; }
@keyframes mmcCligne { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes mmcClin { 0%, 62%, 100% { transform: scaleY(1); } 66%, 78% { transform: scaleY(.1); } 82% { transform: scaleY(1); } 91% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }

/* ---- lanceur (rond, 64 px, en bas à droite) ---- */
.mmc-lanceur { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 64px; height: 64px; padding: 4px; border: 0; border-radius: 50%;
  background: #00D623; cursor: pointer; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .55); transition: transform .2s; }
.mmc-lanceur:hover { transform: scale(1.06); }
.mmc-lanceur .mmc-ava { width: 100%; height: 100%; }
.mmc-lanceur:focus-visible, .mmc-bulle button:focus-visible, .mmc-chip:focus-visible, .mmc-lien:focus-visible, .mmc-envoyer:focus-visible { outline: 3px solid #1E1F22; outline-offset: 3px; }
.mmc-lanceur:focus-visible { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px #1E1F22; outline: 0; }

/* ---- bulle d'accroche : à GAUCHE du lanceur, jamais au-dessus ---- */
.mmc-bulle { position: fixed; right: 96px; bottom: 28px; z-index: 91; display: flex; align-items: stretch; max-width: min(300px, calc(100vw - 116px));
  background: #FFFFFF; color: #1E1F22; border: 2px solid #1E1F22; border-radius: 2px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateX(10px); transition: opacity .3s, transform .3s; }
.mmc-bulle.mmc-vue { opacity: 1; transform: none; }
.mmc-bulle-texte { flex: 1; min-height: 44px; padding: 8px 4px 8px 14px; border: 0; background: transparent; color: inherit; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; }
.mmc-bulle-x { flex: none; width: 44px; min-height: 44px; border: 0; background: transparent; color: #45464A; font-size: 24px; line-height: 1; cursor: pointer; }
.mmc-bulle-x:hover { color: #1E1F22; }

/* ---- fenêtre ---- */
.mmc-fenetre { position: fixed; right: 20px; bottom: 96px; z-index: 120; display: none; flex-direction: column; width: 380px; max-width: calc(100vw - 24px);
  height: min(620px, 80vh); max-height: calc(100vh - 116px); background: #F5F1EB; color: #1E1F22; border-radius: 2px; overflow: hidden;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6); }
.mmc-fenetre.mmc-ouvert { display: flex; animation: mmcEntree .22s ease-out both; }
@keyframes mmcEntree { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.mmc-tete { display: flex; align-items: center; gap: 12px; flex: none; padding: 12px 8px 12px 14px; background: #1E1F22; color: #FFFFFF; border-bottom: 3px solid #00D623; }
.mmc-ava-tete { width: 44px; height: 44px; }
.mmc-titres { flex: 1; min-width: 0; }
.mmc-titre { font-size: 16px; font-weight: 700; line-height: 1.2; }
.mmc-sous { margin-top: 2px; font-size: 13px; line-height: 1.3; color: #D9D6CF; }
.mmc-fermer { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: #FFFFFF; cursor: pointer; }
.mmc-fermer:hover { background: rgba(255, 255, 255, .14); }
.mmc-fermer:focus-visible { outline: 3px solid #FFFFFF; outline-offset: -3px; }

/* ---- fil des messages ---- */
.mmc-fil { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.mmc-fil:focus-visible { outline: 3px solid #1E1F22; outline-offset: -3px; }
.mmc-ligne { display: flex; align-items: flex-end; gap: 8px; max-width: 94%; animation: mmcEntree .2s ease-out both; }
.mmc-lui { align-self: flex-start; }
.mmc-moi { align-self: flex-end; }
.mmc-ava-msg { width: 30px; height: 30px; }
.mmc-msg { padding: 10px 13px; font-size: 15px; line-height: 1.45; border-radius: 2px; min-width: 0; overflow-wrap: anywhere; }
.mmc-lui .mmc-msg { background: #FFFFFF; color: #1E1F22; border: 1px solid #D9D6CF; border-bottom-left-radius: 0; }
.mmc-moi .mmc-msg { background: #00D623; color: #141414; border-bottom-right-radius: 0; }
.mmc-texte { white-space: pre-line; }
.mmc-liens { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.mmc-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1.5px solid #1E1F22; border-radius: 2px; background: #FFFFFF; color: #1E1F22;
  font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; }
.mmc-lien::after { content: "\2192"; margin-left: 8px; }
.mmc-lien:hover { background: #1E1F22; color: #FFFFFF; }
.mmc-petit { margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: #45464A; }

/* « … » pendant que l'assistant écrit */
.mmc-ecrit .mmc-msg { display: flex; gap: 4px; padding: 14px 13px; }
.mmc-pt { width: 7px; height: 7px; border-radius: 50%; background: #45464A; opacity: .35; animation: mmcPoint 1s infinite; }
.mmc-pt:nth-child(2) { animation-delay: .15s; }
.mmc-pt:nth-child(3) { animation-delay: .3s; }
@keyframes mmcPoint { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }

/* ---- puces de réponse rapide ---- */
.mmc-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; max-height: 44%; overflow-y: auto; padding: 8px 14px 10px; }
.mmc-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; border: 1.5px solid #1E1F22; border-radius: 2px; background: #FFFFFF; color: #1E1F22;
  font-size: 14px; font-weight: 600; line-height: 1.2; text-align: left; text-decoration: none; cursor: pointer; }
.mmc-chip:hover { background: #00D623; color: #141414; border-color: #141414; }
.mmc-chip-sec { border-color: #45464A; background: transparent; color: #45464A; font-weight: 500; }
.mmc-chip-sec:hover { background: #1E1F22; color: #FFFFFF; border-color: #1E1F22; }
.mmc-chip-wa { flex: 1 1 100%; background: #00D623; color: #141414; border-color: #141414; }
.mmc-chip-wa:hover { background: #1E1F22; color: #FFFFFF; }
.mmc-chip-mail { flex: 1 1 100%; background: #1E1F22; color: #FFFFFF; }
.mmc-chip-mail:hover { background: #00D623; color: #141414; }

/* ---- saisie libre ---- */
.mmc-form { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid #D9D6CF; background: #FFFFFF; }
.mmc-saisie { flex: 1; min-width: 0; min-height: 44px; max-height: 112px; padding: 10px 12px; border: 1.5px solid #45464A; border-radius: 2px; background: #FFFFFF; color: #1E1F22;
  font-size: 16px; line-height: 1.4; resize: none; overflow-y: auto; }
.mmc-saisie::placeholder { color: #5A5B60; opacity: 1; }
.mmc-saisie:focus { outline: 3px solid #00D623; outline-offset: 0; border-color: #1E1F22; }
.mmc-envoyer { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 2px; background: #00D623; color: #141414; cursor: pointer; }
.mmc-envoyer:hover { background: #1E1F22; color: #FFFFFF; }

/* ---- mobile : plein écran ---- */
@media (max-width: 559px) {
  .mmc-fenetre { right: 0; left: 0; top: 0; bottom: auto; width: 100%; max-width: none; height: var(--mmc-h, 100dvh); max-height: none; border-radius: 0; box-shadow: none; }
  html.mmc-actif { overflow: hidden; }
  .mmc-bulle { max-width: calc(100vw - 116px); }
}
@media (prefers-reduced-motion: reduce) {
  .mmc *, .mmc-fenetre.mmc-ouvert { animation: none !important; transition: none !important; }
  .mmc-bulle { transform: none; }
}
@media print { .mmc { display: none; } }