/* Messagerie — la liste des conversations.
 *
 * CE QU'IL Y AVAIT AVANT. Une initiale sur pastille beige en guise d'avatar,
 * et TROIS troncatures superposees sur la meme ligne : le nom de l'hote, le
 * logement et le dernier message se coupaient en meme temps. On ne savait ni
 * qui ecrivait, ni d'ou, ni quoi. Le nom etait par ailleurs le plus gros texte
 * de la carte, et le message reel le plus petit — la hierarchie a l'envers.
 *
 * MAINTENANT. La photo du logement porte l'identite visuelle : sur Luvia on
 * reserve un lieu, pas une personne. Une pastille dit l'etat du sejour, parce
 * qu'un echange sur une arrivee dans trois jours ne se lit pas comme un echange
 * sur un sejour d'aout dernier. Et l'apercu du message a deux lignes pleines.
 *
 * Sur la typographie : le projet ne charge qu'Inter. Le mot d'accent utilise une
 * pile serif systeme. Pour le serif exact de la maquette, deposer un .woff2
 * dans assets/2032/ et remplacer la pile dans .lv-accent (sejours-2036.css).
 */

/* ================= En-tête ================= */
.lv-msg-entete { margin: 0 0 18px; }
.lv-msg-entete h1 { margin: 0 0 8px; }
/* Le chapeau s'arrête avant l'accent manuscrit, sinon les deux se recouvrent. */
.lv-msg-chapeau { margin: 0; padding-right: 128px; color: #8a7666; font: 400 14px/1.6 Inter, Arial, sans-serif; }
@media (max-width: 400px) { .lv-msg-chapeau { padding-right: 104px; } }

/* L'accent manuscrit, calé en haut à droite du titre. Caveat rejoint Inter
   dans le chargement Google Fonts déjà présent sur la page — aucune requête
   nouvelle vers un domaine nouveau. La pile de repli est cursive puis serif :
   si la police ne charge pas, la phrase reste lisible et garde son intention. */
.lv-msg-entete { position: relative; }
.lv-msg-note {
  position: absolute; top: 4px; right: 0;
  margin: 0; max-width: 130px; text-align: center;
  transform: rotate(-6deg);
  color: #c08a52;
  font: 600 19px/1.15 Caveat, 'Segoe Script', cursive, Georgia, serif;
}
.lv-msg-note svg {
  display: block; margin: 5px auto 0; width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}
@media (max-width: 400px) {
  .lv-msg-note { font-size: 16px; max-width: 104px; top: 2px; }
}

/* ================= Recherche ================= */
.lv-msg-barre { display: flex; align-items: stretch; gap: 9px; margin: 0 0 14px; }
.lv-msg-barre .lv-msg-recherche { flex: 1; min-width: 0; margin: 0; }

/* Le bouton de réglages : même hauteur que le champ, carré arrondi. */
.lv-msg-reglages {
  flex: none; display: grid; place-items: center;
  width: 50px; border: 1px solid #ece2d9; border-radius: 20px;
  background: #fffdfb; color: #8a7666; cursor: pointer; padding: 0;
}
.lv-msg-reglages:hover { border-color: #d9b99e; color: #b4703f; }
.lv-msg-reglages svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
}

.lv-msg-recherche {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 14px; padding: 0 16px;
  border: 1px solid #ece2d9; border-radius: 26px;
  background: #fffdfb;
}
.lv-msg-recherche:focus-within { border-color: #d9b99e; }
.lv-msg-recherche svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: #a2907f; stroke-width: 1.7; stroke-linecap: round;
}
.lv-msg-recherche input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 14px 0; color: #1c1c1e;
  /* 16 px minimum : en dessous, iOS zoome sur le champ au focus. */
  font: 400 16px Inter, Arial, sans-serif;
}
.lv-msg-recherche input::placeholder { color: #a2907f; font-size: 13.5px; }
.lv-msg-recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ================= Filtres ================= */
.lv-msg-filtres {
  display: flex; gap: 8px; margin: 0 0 18px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.lv-msg-filtres::-webkit-scrollbar { display: none; }
.lv-msg-filtres button {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border: 1px solid #e6dad0; border-radius: 24px;
  background: #fffdfb; color: #6b5b4e;
  font: 550 12.5px Inter, Arial, sans-serif; cursor: pointer; white-space: nowrap;
}
.lv-msg-filtres button i {
  font-style: normal; padding: 1px 7px; border-radius: 12px;
  background: #f2e8e0; color: #8a7666; font-size: 11px; font-weight: 650;
}
.lv-msg-filtres button[aria-pressed="true"] {
  background: linear-gradient(135deg, #b4703f, #8d5528);
  border-color: transparent; color: #fff8f2;
}
.lv-msg-filtres button[aria-pressed="true"] i { background: #ffffff2e; color: #fff1e4; }
.lv-msg-filtres button:disabled { opacity: .45; cursor: default; }

/* ================= La ligne ================= */
#conversations-list { display: flex; flex-direction: column; gap: 11px; }

.lv-conv {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 26px;
  gap: 13px; align-items: center;
  padding: 11px; cursor: pointer;
  border: 1px solid #ece2d9; border-radius: 22px; background: #fffdfb;
  transition: border-color .2s ease, transform .2s ease;
}
.lv-conv:hover { border-color: #dcc7b5; transform: translateY(-1px); }
.lv-conv.est-nonlu { background: #fffaf5; border-color: #e6d2c1; }

/* --- La photo et sa pastille d'état --- */
.lv-conv-photo { position: relative; }
.lv-conv-photo img {
  width: 104px; height: 86px; border-radius: 15px;
  object-fit: cover; display: block; background: #f2e9e2;
}
/* La pastille porte un pictogramme : un mot demande d'être lu, une forme se
   reconnaît avant. Calendrier pour ce qui vient, horloge pour ce qui attend,
   coche pour ce qui est fait, croix pour ce qui est annulé, bulle pour un
   message non lu. */
.lv-conv-etat {
  position: absolute; top: 7px; left: 7px; right: 7px;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 12px;
  background: #241d18d9; backdrop-filter: blur(8px); color: #fff;
  font: 600 9.5px/1.3 Inter, Arial, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-conv-etat svg {
  width: 11px; height: 11px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Le non-lu prend le cuivre de la marque : c'est la seule pastille qui
   réclame une action, elle doit se distinguer des états de séjour. */
.lv-conv-etat[data-etat="nouveau"] { background: #b4703fe8; }
.lv-conv-etat[data-etat="avenir"]  { background: #8d5528e6; }
.lv-conv-etat[data-etat="encours"] { background: #6f6a3ee6; }
.lv-conv-etat[data-etat="attente"] { background: #7a6248e6; }
.lv-conv-etat[data-etat="annulee"] { background: #6b4a42e6; }

/* --- Le corps --- */
.lv-conv-corps { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* L'heure se cale en haut : si le nom passe sur deux lignes, elle reste
   alignée sur la première plutôt que de flotter au milieu. */
.lv-conv-haut { display: flex; align-items: flex-start; gap: 8px; }

.lv-conv-avatar {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #f0d3bd, #dcae8c); color: #6b4526;
  font: 700 11px Inter, Arial, sans-serif;
}

.lv-conv-qui { min-width: 0; flex: 1; display: flex; flex-direction: column; }
/* Le nom de l'hôte ne se coupe pas : « Yacine Tra… » n'est pas quelqu'un.
   Il passe à la ligne s'il le faut — c'est la règle maison, zéro troncature. */
/* « Sophie · Gîtes sur Paris » : l'hôte et son logement sur la même ligne,
   séparés d'un point médian. Le nom seul ne dit pas de quel séjour on parle,
   et le logement seul ne dit pas à qui l'on écrit. */
.lv-conv-qui b {
  color: #1c1c1e; font: 620 14px/1.25 Inter, Arial, sans-serif; letter-spacing: -.2px;
  /* Jamais de coupure a l interieur d un mot : « gite/s » ne veut rien dire.
     Le texte passe a la ligne entre les mots, un point c est tout. */
  overflow-wrap: normal; word-break: normal;
}
.lv-conv-qui b i { font-style: normal; color: #c4b3a3; margin: 0 5px; font-weight: 400; }
/* Le logement et la ville peuvent, eux, s'abréger : on les retrouve dans le
   fil, et la photo dit déjà de quel lieu il s'agit. */
.lv-conv-qui small {
  color: #9c8977; font: 400 11.5px Inter, Arial, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lv-conv-heure {
  flex: none; display: flex; align-items: center; gap: 6px;
  color: #a2907f; font: 500 11px Inter, Arial, sans-serif;
}
/* Le point de non-lu en cuivre, jamais en rouge : un rouge lit comme une
   erreur, alors qu'un message qui attend est une bonne nouvelle. */
.lv-conv-point { width: 7px; height: 7px; border-radius: 50%; background: #d9906c; }
.lv-conv.est-nonlu .lv-conv-heure { color: #b4703f; font-weight: 650; }

/* Deux lignes pleines pour l'apercu : c'est l'information qu'on vient
   chercher, elle ne peut pas etre la plus petite de la carte. */
.lv-conv-apercu {
  margin: 0; color: #5f5348;
  font: 400 13px/1.45 Inter, Arial, sans-serif;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lv-conv-apercu span { color: #9c8977; }
.lv-conv.est-nonlu .lv-conv-apercu { color: #2c2620; font-weight: 500; }

.lv-conv-fleche {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #eee2d8; background: #fff;
}
.lv-conv-fleche svg { width: 13px; height: 13px; fill: none; stroke: #9c8977; stroke-width: 2; }

@media (max-width: 380px) {
  .lv-conv { grid-template-columns: 96px minmax(0, 1fr); gap: 11px; }
  .lv-conv-photo img { width: 96px; height: 82px; }
  .lv-conv-fleche { display: none; }
  .lv-conv-etat { font-size: 8.5px; padding: 3px 6px; }
}


/* ══════════════════════════════════════════════════════════════════════
   LE FIL DE CONVERSATION
   ══════════════════════════════════════════════════════════════════════

   De haut en bas : une entête en verre (retour · avatar · nom · menu), la
   carte du logement, la barre de réservation, les séparateurs de jour, les
   bulles groupées, les raccourcis, la barre de saisie en verre.

   CE QUI N'Y EST PAS, ET POURQUOI — ce sont des choix, pas des oublis :
     — Pas de point vert « En ligne » : aucun système de présence n'existe
       dans Firestore. Un point codé en dur serait vert même si l'hôte n'a
       pas ouvert l'application depuis six mois.
     — Pas de « répond en moyenne en X minutes » : on ne mesure pas les
       délais de réponse. Le jour où on les mesurera, la ligne apparaîtra,
       et elle sera vraie.
     — Pas d'indicateur de frappe : il demande une présence temps réel qui
       n'existe pas, et c'est cette tentation qui produit les faux signaux.
     — Pas de bouton téléphone : donner le numéro de l'hôte dans le fil
       ouvre la porte à la réservation hors plateforme.
     — Pas de micro : la règle Storage filtre `image/.*`, un audio serait
       refusé à l'envoi.
     — Pas de numéro de réservation : les identifiants sont des
       `stripe_pi_…`, un « #LUV45872 » serait inventé de toutes pièces.

   SUR LES SÉLECTEURS. Tout ce qui suit vise des classes nommées. La page
   ciblait avant `#conversation-view > div:nth-of-type(1)` et
   `> div:last-of-type` : ajouter un div cassait silencieusement l'entête et
   la barre de saisie. Ces sélecteurs positionnels ont disparu.

   SUR LA SPÉCIFICITÉ. `css/account-2032.css` pose des règles `!important`
   sur `#message-input`, `#messages-container` et `button[onclick=…]`. On les
   reprend ici en préfixant par `#conversation-view` — deux identifiants
   l'emportent sur un identifiant + une classe, et ce fichier charge après. */

/* ── La coquille ────────────────────────────────────────────────────── */
/* Aucune règle `display` sur `#conversation-view` hors du plein écran :
   la classe `.hidden` de Tailwind doit continuer à le masquer. */
#conversation-view { min-width: 0; }

/* Le défilement du fil était porté par la classe Tailwind `overflow-y-auto`
   posée dans le HTML. Elle a disparu avec les utilitaires : sans cette ligne,
   les bulles débordent du conteneur et se dessinent PAR-DESSUS les raccourcis
   et la barre de saisie. Il tient ici, dans le CSS, une fois pour toutes. */
#conversation-view #messages-container {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* ── L'entête ───────────────────────────────────────────────────────── */
/* `backdrop-filter` crée un CONTEXTE D'EMPILEMENT. Sans `z-index` ici, le
   panneau du menu « ⋮ » — pourtant en z-index 4 — restait prisonnier de ce
   contexte, et l'entête se dessinait avant le fil : le menu s'ouvrait SOUS
   les messages, réduit à un liseré blanc. C'est l'entête entière qu'il faut
   élever, pas son panneau. */
.lv-fil-entete {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid #ece2d9;
  background: rgba(255, 253, 251, .82);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}

#conversation-view .lv-fil-retour,
#conversation-view .lv-fil-menu {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%;
  background: none; color: #6b5b4e; cursor: pointer;
  min-height: 38px; font-size: 0;
}
#conversation-view .lv-fil-retour:hover,
#conversation-view .lv-fil-menu:hover { background: #f1e7df; color: #b4703f; }
#conversation-view .lv-fil-retour svg,
#conversation-view .lv-fil-menu svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
#conversation-view .lv-fil-menu svg { fill: currentColor; stroke: none; }
.lv-fil-menu { margin-left: auto; }

.lv-fil-avatar {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #f0d3bd, #dcae8c); color: #6b4526;
  font: 700 15px Inter, Arial, sans-serif;
}

/* Le nom ne se coupe jamais : « Sophie · Gîtes sur Pa… » n'est personne ni
   nulle part. Il passe à la ligne, un point c'est tout. */
.lv-fil-qui {
  min-width: 0; flex: 1; margin: 0;
  color: #1c1c1e; font: 400 14.5px/1.3 Inter, Arial, sans-serif;
  overflow-wrap: normal; word-break: normal;
}
.lv-fil-qui strong { font-weight: 660; letter-spacing: -.25px; }
.lv-fil-qui .lv-fil-point { color: #a2907f; margin: 0 5px; }
#conversation-subtitle { color: #6b5b4e; font-weight: 500; }

/* Le menu : trois destinations réelles, pas une de plus. */
/* Calé sur le bas de l'entête, pas sur une hauteur devinée : celle-ci varie
   avec `env(safe-area-inset-top)` et avec un nom qui passe sur deux lignes. */
.lv-fil-menu-panneau {
  position: absolute; top: calc(100% + 6px); right: 12px; z-index: 4;
  min-width: 196px; padding: 6px;
  border: 1px solid #ece2d9; border-radius: 18px;
  background: #fffdfb; box-shadow: 0 14px 34px rgba(58, 40, 26, .14);
}
.lv-fil-menu-panneau[hidden] { display: none !important; }
.lv-fil-menu-panneau a {
  display: block; padding: 10px 12px; border-radius: 13px;
  color: #4d3f34; text-decoration: none;
  font: 500 13px Inter, Arial, sans-serif;
}
.lv-fil-menu-panneau a:hover { background: #f6efe8; color: #b4703f; }

/* ── Le contexte : le logement, puis la réservation ─────────────────── */
/* Il vit en tête du fil et DÉFILE AVEC LUI : c'est la première chose qu'on
   lit en ouvrant, puis qu'on laisse derrière soi. Collé en bandeau, il
   mangerait un quart d'un écran de 390 px pour toute la conversation. */
.lv-fil-contexte { margin: 2px 0 14px; }

.lv-fil-logement {
  position: relative; overflow: hidden;
  border-radius: 22px; background: #efe6de;
  aspect-ratio: 16 / 9;
}
.lv-fil-logement img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Un voile sombre en bas plutôt que sur toute la photo : le lieu reste
   visible, le texte reste lisible. */
.lv-fil-voile {
  position: absolute; inset: auto 0 0 0; padding: 46px 15px 13px;
  background: linear-gradient(transparent, rgba(28, 21, 15, .86) 62%);
  color: #fff;
}
.lv-fil-voile h3 { margin: 0; font: 650 19px/1.2 Inter, Arial, sans-serif; letter-spacing: -.5px; }
.lv-fil-voile p {
  display: flex; align-items: center; gap: 5px; margin: 5px 0 0;
  color: rgba(255, 255, 255, .82); font: 400 12.5px Inter, Arial, sans-serif;
}
.lv-fil-voile p svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }
.lv-fil-tags { flex-wrap: wrap; gap: 6px !important; margin-top: 9px !important; }
.lv-fil-tags span {
  padding: 3px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, .19);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font: 500 10.5px Inter, Arial, sans-serif;
}

.lv-fil-voir {
  position: absolute; top: 11px; right: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 22px;
  background: rgba(255, 253, 251, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #4d3f34; text-decoration: none;
  font: 600 11.5px Inter, Arial, sans-serif;
}
.lv-fil-voir svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* La barre de réservation. Elle n'apparaît QUE si la conversation porte un
   `bookingId` et que la réservation a été relue : une conversation d'avant
   réservation n'a pas de dates, et inventer « 2 voyageurs » par défaut
   serait un mensonge de plus. */
.lv-fil-resa {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 9px 0 0; padding: 12px 14px;
  border: 1px solid #f0e6dd; border-radius: 18px; background: #fffdfb;
}
.lv-fil-resa-item { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lv-fil-ico {
  flex: none; display: grid; place-items: center;
  width: 31px; height: 31px; border-radius: 11px;
  background: #f6efe8; color: #b4703f;
}
.lv-fil-ico svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.lv-fil-libelle { margin: 0 0 2px; color: #9c8977; font: 500 10.5px Inter, Arial, sans-serif; }
.lv-fil-dates {
  margin: 0; color: #1c1c1e;
  font: 650 13px/1.3 Inter, Arial, sans-serif; letter-spacing: -.2px;
}
.lv-fil-dates em { font-style: normal; color: #9c8977; font-weight: 500; }
.lv-fil-detail { margin: 2px 0 0; color: #9c8977; font: 400 11px Inter, Arial, sans-serif; }

/* La pastille d'état reprend, mot pour mot, les libellés des séjours :
   « En attente », « Confirmée », « Terminée », « Annulée ». Rien d'autre —
   un statut inconnu n'affiche pas de pastille plutôt qu'un mot inventé. */
.lv-fil-etat {
  margin-left: auto; flex: none;
  padding: 6px 12px; border-radius: 14px;
  background: #f2e8e0; color: #6b5b4e;
  font: 620 11px Inter, Arial, sans-serif; white-space: nowrap;
}
.lv-fil-etat[data-etat="confirmed"] { background: #eddfd0; color: #7d5527; }
.lv-fil-etat[data-etat="pending"]   { background: #f1e9df; color: #7a6248; }
.lv-fil-etat[data-etat="completed"] { background: #e8e6da; color: #5d5a41; }
.lv-fil-etat[data-etat="cancelled"] { background: #f2e2dd; color: #8a5245; }

/* ── Le séparateur de jour ──────────────────────────────────────────── */
/* « Aujourd'hui », « Hier », puis la date. Sans lui, un message d'il y a
   trois semaines et celui de ce matin se lisent comme la même conversation. */
.lv-fil-jour {
  align-self: center; margin: 16px auto 10px; padding: 5px 14px;
  border: 1px solid #ece2d9; border-radius: 20px;
  background: rgba(255, 253, 251, .86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #8a7666; font: 620 11px Inter, Arial, sans-serif; letter-spacing: .2px;
}

/* ── Les bulles ─────────────────────────────────────────────────────── */
.lv-bul { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
.lv-bul[data-moi="1"] { flex-direction: row-reverse; }
.lv-bul.est-debut { margin-top: 9px; }

/* L'avatar n'accompagne que l'hôte, et seulement la première bulle d'un
   groupe. Sur les suivantes il reste en place mais invisible : sans cette
   gouttière, les bulles d'un même groupe ne s'alignent plus entre elles.
   Côté voyageur il n'y en a pas : on sait à qui appartiennent ses propres
   messages, et Airbnb ne le met pas non plus. */
.lv-bul-av {
  /* En haut de la première bulle, pas en bas : collé au bas, il tombait
     entre la première et la deuxième bulle du groupe et n'appartenait plus à
     aucune des deux. */
  flex: none; align-self: flex-start; margin-top: 1px;
  display: grid; place-items: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: linear-gradient(135deg, #f0d3bd, #dcae8c); color: #6b4526;
  font: 700 11px Inter, Arial, sans-serif;
}
.lv-bul:not(.est-debut) .lv-bul-av { visibility: hidden; }
.lv-bul[data-moi="1"] .lv-bul-av { display: none; }

.lv-bul-col { min-width: 0; max-width: 78%; display: flex; flex-direction: column; }
.lv-bul[data-moi="1"] .lv-bul-col { align-items: flex-end; }

.lv-bulle {
  padding: 10px 14px; border-radius: 20px;
  color: #1c1c1e; font: 400 15px/1.45 Inter, Arial, sans-serif;
  /* Une adresse ou un code de portail ne se coupe pas au milieu d'un mot :
     il faut pouvoir le recopier. Mais un lien de 90 caractères ne doit pas
     déborder de l'écran non plus — d'où `anywhere` en dernier recours. */
  overflow-wrap: anywhere; white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(70, 44, 26, .06);
}
.lv-bul[data-moi="0"] .lv-bulle { background: #fffdfb; border: 1px solid #ece2d9; }
.lv-bul[data-moi="1"] .lv-bulle {
  background: linear-gradient(135deg, #c8834d, #9a5f2c);
  border: 1px solid transparent; color: #fff8f2;
}

/* Le coin « queue » ne se resserre qu'à la fin d'un groupe, et les coins
   intérieurs d'une suite se resserrent entre eux : c'est ce qui fait lire
   trois bulles comme un seul message en trois temps. */
.lv-bul[data-moi="0"].est-fin .lv-bulle { border-bottom-left-radius: 7px; }
.lv-bul[data-moi="0"]:not(.est-debut) .lv-bulle { border-top-left-radius: 7px; }
.lv-bul[data-moi="1"].est-fin .lv-bulle { border-bottom-right-radius: 7px; }
.lv-bul[data-moi="1"]:not(.est-debut) .lv-bulle { border-top-right-radius: 7px; }

.lv-bul-heure {
  margin: 4px 3px 2px; color: #a2907f;
  font: 500 11px Inter, Arial, sans-serif;
}
/* L'heure ne s'affiche qu'à la fin d'un groupe : la répéter sous chaque
   bulle transforme une conversation en journal système. */
.lv-heure-masquee { display: none !important; }

/* Le message d'attente et le fil vide gardent le ton de la page. */
.lv-fil-note {
  margin: 22px auto; padding: 0 20px; max-width: 280px;
  color: #9c8977; font: 400 13px/1.6 Inter, Arial, sans-serif; text-align: center;
}
.lv-fil-note.est-erreur { color: #97553f; }

/* ── Les raccourcis ─────────────────────────────────────────────────── */
/* Ils REMPLISSENT le champ, ils n'envoient pas : une question part au nom
   du voyageur, il doit pouvoir la relire et la corriger avant. */
.lv-fil-raccourcis {
  display: flex; gap: 8px; padding: 9px 13px 3px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lv-fil-raccourcis::-webkit-scrollbar { display: none; }
.lv-fil-raccourcis[hidden] { display: none !important; }
#conversation-view .lv-fil-raccourcis button {
  flex: none; padding: 9px 15px; min-height: 38px;
  border: 1px solid #e6dad0 !important; border-radius: 22px !important;
  background: rgba(255, 253, 251, .88) !important; color: #6b5b4e !important;
  font: 550 12.5px Inter, Arial, sans-serif; white-space: nowrap; cursor: pointer;
  box-shadow: none !important;
}
#conversation-view .lv-fil-raccourcis button:hover {
  border-color: #d9b99e !important; color: #b4703f !important;
}

/* ── La barre de saisie ─────────────────────────────────────────────── */
/* Le module photo se prépose au champ (`barre.prepend`) : l'ordre visuel est
   donc fixé ici — « + », champ, photo, envoi — plutôt que dans le DOM. */
.lv-fil-saisie {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid #ece2d9;
  background: rgba(255, 253, 251, .82);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}
.lv-fil-plus { order: 0; }
#conversation-view #message-input { order: 1; }
.lv-photo-bouton { order: 2; }
.lv-fil-envoyer { order: 3; }

#conversation-view .lv-fil-plus {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; min-height: 42px; padding: 0;
  border: 1px solid #e6dad0 !important; border-radius: 50% !important;
  background: #fffdfb !important; color: #8a7666 !important; cursor: pointer;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
#conversation-view .lv-fil-plus svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
/* Le « + » reste un « + ». On avait essayé de le faire pivoter en croix quand
   les raccourcis sont ouverts : à l'ouverture de la page il s'affichait donc
   en « × », ce qui se lit « fermer la conversation ». L'état se dit par la
   teinte cuivre — et par la bande de questions, qu'on voit juste au-dessus. */
#conversation-view .lv-fil-plus[aria-expanded="true"] {
  background: #f6efe8 !important; border-color: #dcc0a6 !important; color: #b4703f !important;
}
#conversation-view .lv-fil-plus:hover { border-color: #cbb29e !important; color: #b4703f !important; }

#conversation-view #message-input {
  flex: 1; min-width: 0;
  padding: 12px 17px !important; min-height: 44px;
  border: 1px solid #e6dad0 !important; border-radius: 999px !important;
  background: #fffdfb !important; color: #1c1c1e !important;
  /* 16 px minimum : en dessous, iOS zoome sur le champ au focus et ne
     redézoome jamais. */
  font: 400 16px Inter, Arial, sans-serif !important;
}
#conversation-view #message-input::placeholder { color: #a2907f; }

/* Une flèche plutôt que le mot « Envoyer », qui prenait un quart de la
   largeur pour dire ce qu'une flèche dit. */
#conversation-view .lv-fil-envoyer {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important;
  background: linear-gradient(135deg, #c8834d, #9a5f2c) !important;
  color: #fff !important; cursor: pointer;
  box-shadow: 0 4px 12px rgba(154, 95, 44, .26) !important;
  font-size: 0 !important;
}
#conversation-view .lv-fil-envoyer svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
}
#conversation-view .lv-fil-envoyer:disabled { opacity: .45; cursor: default; }

/* ── Photo dans la conversation ─────────────────────────────────────── */
.lv-photo-bouton {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid #e6dad0; border-radius: 50%;
  background: #fffdfb; color: #8a7666; cursor: pointer;
}
.lv-photo-bouton:hover { border-color: #cbb29e; color: #b4703f; }
.lv-photo-bouton svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* L'état d'envoi se met au-dessus de la barre de saisie, là où le regard est
   déjà. Il dit ce qui se passe — « Envoi… » — puis disparaît. */
.lv-photo-etat {
  margin: 0 14px 6px; padding: 7px 12px;
  border-radius: 14px; background: #f6efe8;
  color: #7b6857; font: 500 12px Inter, Arial, sans-serif;
}
.lv-photo-etat.est-erreur { background: #f6e8e3; color: #97553f; }
.lv-photo-etat[hidden] { display: none !important; }

/* La photo EST la bulle : pas de cadre autour, pas de fond. L'image se
   suffit, et l'encadrer la rabaisserait au rang de pièce jointe.

   La largeur est LIBRE, la hauteur bornée. Avec `width:100%` la bulle prenait
   la largeur du groupe, mais comme elle est aussi un élément flex calé à
   droite (`align-items:flex-end`), « 100 % » d'une largeur automatique ne veut
   rien dire : une capture d'écran en portrait s'affichait en bandelette de
   111 px. Ici une photo paysage remplit la bulle, une photo en hauteur se
   borne à 340 px et garde ses proportions — et ne descend pas sous 150 px de
   large, en deçà on ne reconnaît plus ce qu'on regarde. Un appui ouvre
   l'image entière. */
.lv-bulle-photo {
  display: block; max-width: 100%;
  border-radius: 20px; overflow: hidden; background: #f2e9e2;
}
/* `min-width` en pixels, pas en `min(150px, 100%)` : la bulle est un élément
   flex de largeur automatique, un pourcentage s'y résout donc à zéro et la
   borne ne s'appliquait pas. 150 px tient sur le plus étroit des téléphones. */
.lv-bulle-photo img {
  display: block;
  width: auto; max-width: 100%;
  min-width: 150px; max-height: 340px;
  object-fit: cover;
}

/* ══ Le fil sur ordinateur ═══════════════════════════════════════════ */
/* La page à colonnes reste la bonne réponse : le fil garde son cadre, mais
   il prend la même langue visuelle que sur téléphone. */
@media (min-width: 768px) {
  #conversation-view {
    border: 1px solid #ece2d9; border-radius: 24px;
    background: #fdfaf7; overflow: hidden;
  }
  .lv-fil-entete { border-radius: 24px 24px 0 0; }
  #conversation-view #messages-container {
    background: transparent !important;
    border: 0 !important; border-radius: 0 !important;
    margin: 0 !important; padding: 6px 20px 12px !important;
    min-height: 340px; max-height: 58vh;
    display: flex; flex-direction: column;
  }
  /* Le fil fait ici plus de 1000 px de large. Une photo 16/9 pleine largeur y
     pèse 590 px de haut : la carte du logement remplissait tout le fil et on
     ne voyait plus un seul message. On la borne, et le format s'allonge —
     c'est un bandeau de contexte, pas une fiche produit. */
  .lv-fil-contexte { max-width: 560px; margin-left: auto; margin-right: auto; }
  .lv-fil-logement { aspect-ratio: 21 / 9; }
  .lv-fil-voile { padding: 38px 15px 12px; }
  /* Une bulle de 800 px ne se lit plus en diagonale : on borne à une largeur
     de lecture confortable plutôt qu'à un pourcentage de l'écran. */
  .lv-bul-col { max-width: min(78%, 520px); }
  .lv-fil-saisie { padding: 12px 14px; }
}

/* ══ Le fil sur téléphone : il prend l'écran ═════════════════════════ */
@media (max-width: 767px) {
  body.lv-conversation-ouverte { overflow: hidden; }

  body.lv-conversation-ouverte #conversation-view {
    position: fixed; inset: 0; z-index: 60;
    display: flex; flex-direction: column;
    background:
      radial-gradient(900px 480px at 84% -8%, rgba(233, 197, 145, .18), transparent 62%),
      linear-gradient(178deg, #fdf8f1 0%, #f8f3f0 58%, #f5ede2 100%);
  }

  body.lv-conversation-ouverte .lv-fil-entete {
    flex: none; padding-top: calc(12px + env(safe-area-inset-top));
  }

  /* Le fil est le seul élément qui défile : le contexte du logement vit
     dedans, l'entête et la saisie l'encadrent. */
  body.lv-conversation-ouverte #messages-container {
    flex: 1 1 auto; min-height: 0;
    max-height: none !important; margin: 0 !important;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important;
    padding: 10px 14px 6px !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column;
  }

  body.lv-conversation-ouverte .lv-fil-raccourcis,
  body.lv-conversation-ouverte .lv-fil-saisie,
  body.lv-conversation-ouverte .lv-photo-etat { flex: none; }

  /* La barre d'onglets disparaît pendant la conversation. Elle est en
     z-index 120, la vue en 60 : elle recouvrait la barre de saisie, qu'on ne
     pouvait donc pas atteindre. C'est aussi ce que font les applications —
     une conversation prend l'écran, on en ressort par la flèche. */
  body.lv-conversation-ouverte nav[data-mobile-nav],
  body.lv-conversation-ouverte nav.mobile-nav,
  body.lv-conversation-ouverte .account-bottom-nav { display: none !important; }
}

@media (max-width: 380px) {
  .lv-fil-voile h3 { font-size: 17.5px; }
  #conversation-view .lv-fil-plus { width: 38px; height: 38px; min-height: 38px; }
  .lv-photo-bouton { width: 38px; height: 38px; }
  .lv-fil-saisie { gap: 7px; padding-left: 10px; padding-right: 10px; }
}