/* ==========================================================================
   Assistant d'achat (mode IA) et messagerie
   ========================================================================== */

/* Bouton d'accès sur toutes les pages de la boutique */
.acces-assistant { position: fixed; right: 16px; bottom: calc(var(--lm-barre-h) + 14px); z-index: 1025; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 6px; background: var(--lm-encre); color: #fff; font-weight: 600; font-size: 0.9rem; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.acces-assistant:hover { color: #fff; background: #000; }
.acces-assistant .point { width: 8px; height: 8px; border-radius: 50%; background: var(--lm-orange); }
@media (min-width: 992px) { .acces-assistant { bottom: 24px; right: 24px; } }
body.page-assistant .acces-assistant, body.avec-barre-achat .acces-assistant { display: none; }

/* Page de l'assistant */
/* Plein écran : sur téléphone, on masque la recherche, la barre du bas et le pied de page. */
body.page-assistant { padding-bottom: 0; }
body.page-assistant .pied, body.page-assistant .barre-bas, body.page-assistant .entete-recherche-mobile { display: none; }
.assistant { display: flex; flex-direction: column; height: calc(100dvh - var(--lm-entete-h) - 46px); max-width: 860px; margin: 0 auto; background: #fff; border-left: 1px solid var(--lm-filet); border-right: 1px solid var(--lm-filet); }
@media (min-width: 992px) { .assistant { height: calc(100dvh - var(--lm-entete-h) - 46px - 32px); } }
.assistant-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--lm-filet); }
.assistant-avatar { width: 38px; height: 38px; border-radius: 6px; background: var(--lm-orange); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.assistant-tete .titre { flex: 1; min-width: 0; line-height: 1.2; }
.assistant-tete .titre strong { color: var(--lm-encre); }
.assistant-tete .titre small { display: block; color: var(--lm-gris); font-size: 0.78rem; }
.assistant-fil { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; background: var(--lm-fond); }
.bulle { max-width: 88%; padding: 10px 13px; border-radius: 6px; line-height: 1.5; font-size: 0.95rem; word-wrap: break-word; }
.bulle-client { align-self: flex-end; background: var(--lm-encre); color: #fff; border-bottom-right-radius: 2px; }
.bulle-ia { align-self: flex-start; background: #fff; border: 1px solid var(--lm-filet); color: var(--lm-texte); border-bottom-left-radius: 2px; }
.bulle-ia p { margin: 0 0 6px; }
.bulle-ia p:last-child { margin-bottom: 0; }
.tour-ia { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.ecrit-par { font-size: 0.72rem; color: var(--lm-gris); margin-bottom: -6px; }
.saisie-en-cours span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lm-gris-clair); margin-right: 3px; animation: rebond 1s infinite; }
.saisie-en-cours span:nth-child(2) { animation-delay: .15s; }
.saisie-en-cours span:nth-child(3) { animation-delay: .3s; }
@keyframes rebond { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Cartes dans le fil */
.cartes-ia { display: grid; grid-auto-flow: column; grid-auto-columns: 160px; gap: 8px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.cartes-ia > * { scroll-snap-align: start; }
.carte-ia { background: #fff; border: 1px solid var(--lm-filet); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; color: inherit; min-width: 0; }
.carte-ia:hover { border-color: #C7C7CC; color: inherit; }
.carte-ia .visuel { aspect-ratio: 1 / 1; background: var(--lm-fond); display: block; }
.carte-ia .visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-ia .corps { padding: 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.carte-ia .nom { font-size: 0.82rem; font-weight: 500; color: var(--lm-encre); line-height: 1.25; }
.carte-ia .boutique { font-size: 0.72rem; color: var(--lm-gris); }
.carte-ia .prix { font-weight: 700; color: var(--lm-encre); font-size: 0.95rem; margin-top: auto; }
.carte-ia .prix s { font-weight: 400; font-size: 0.75rem; color: var(--lm-gris); margin-left: 4px; }
.carte-ia .gros { font-size: 0.7rem; color: var(--lm-gris); }
.carte-ia .actions { display: flex; gap: 4px; padding: 0 8px 8px; }
.carte-ia .actions .btn { flex: 1; padding: 0.3rem; font-size: 0.75rem; }
.cartes-liste { display: flex; flex-direction: column; gap: 8px; }
.carte-ligne { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--lm-filet); border-radius: 6px; padding: 10px 12px; color: inherit; }
.carte-ligne:hover { color: inherit; border-color: #C7C7CC; }
.proposition { background: #fff; border: 1px solid var(--lm-encre); border-radius: 6px; padding: 12px; }
.proposition .titre-prop { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lm-gris); font-weight: 600; margin-bottom: 6px; }
.proposition textarea { font-size: 0.92rem; }
.proposition.faite { border-color: var(--lm-vert); }

/* Suggestions de départ */
.suggestions-ia { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestions-ia button { border: 1px solid var(--lm-filet); background: #fff; border-radius: 6px; padding: 8px 12px; font-size: 0.88rem; color: var(--lm-encre); text-align: left; }
.suggestions-ia button:hover { border-color: var(--lm-encre); }
.accueil-ia { text-align: center; padding: 16px 8px; }
.accueil-ia h1 { font-size: 1.3rem; margin: 10px 0 4px; }
.accueil-ia p { color: var(--lm-gris); max-width: 460px; margin: 0 auto 14px; }

/* Photo envoyée par le client */
.photo-envoyee { align-self: flex-end; width: 180px; max-width: 60%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--lm-filet); margin-bottom: -8px; }
.apercu-photo { display: flex; align-items: center; gap: 8px; padding: 8px 10px 0; background: #fff; border-top: 1px solid var(--lm-filet); }
.apercu-photo img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.recherche .bouton-photo { right: 46px; background: transparent; color: var(--lm-gris); }
.recherche .bouton-photo:hover { color: var(--lm-encre); }

/* Zone de saisie */
.assistant-saisie { border-top: 1px solid var(--lm-filet); padding: 10px; display: flex; gap: 8px; align-items: flex-end; background: #fff; }
.assistant-saisie textarea { flex: 1; resize: none; max-height: 120px; border-radius: 6px; padding: 10px 12px; font-size: 16px; line-height: 1.35; }
.assistant-saisie .btn { height: 44px; width: 44px; padding: 0; flex-shrink: 0; }
.assistant-saisie .btn-photo { border: 1px solid #D2D2D7; background: #fff; color: var(--lm-encre); }

/* Messagerie */
.fil-messages { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--lm-fond); max-height: 60vh; overflow-y: auto; }
.msg { max-width: 85%; padding: 9px 12px; border-radius: 6px; font-size: 0.94rem; line-height: 1.45; white-space: pre-line; }
.msg-moi { align-self: flex-end; background: var(--lm-encre); color: #fff; }
.msg-autre { align-self: flex-start; background: #fff; border: 1px solid var(--lm-filet); }
.msg .quand { display: block; font-size: 0.7rem; opacity: .65; margin-top: 3px; }
.non-lu { width: 9px; height: 9px; border-radius: 50%; background: var(--lm-orange); flex-shrink: 0; }