/**
 * KNA Distribution — écran client « Conversations et devis » (lot L11).
 *
 * PORTÉE : espace client uniquement (Mon compte → Conversations et devis).
 * Aucun style d'administration ici : les libellés admin relèvent du lot L9.
 *
 * PALETTE : uniquement les variables de `assets/css/tokens.css`. Aucune couleur
 * inventée, et surtout aucun violet — la teinte `rgb(108,108,255)` mesurée dans
 * le module WholesaleX (`wsx-bg-primary`) n'appartient pas à la charte.
 *
 * Aucun libellé HT/TTC n'est posé : le contrat tarifaire n'est pas encore
 * confirmé (voir le rapport L12). On ne nomme pas une valeur qu'on ne peut pas
 * encore qualifier.
 */

/* ==========================================================================
 * 1. Conteneur et en-tête
 * ========================================================================== */

.wsx-conversation-wrapper,
.wsx-conversation-list-wrapper {
	color: var(--kna-color-text-strong);
	font-family: var(--kna-font-body);
}

.wsx-conversation-header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kna-space-sm);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--kna-space-md);
	padding-bottom: var(--kna-space-sm);
	border-bottom: 1px solid var(--kna-color-card-border);
	color: var(--kna-color-brand);
	font-size: var(--kna-font-size-lg);
	font-weight: var(--kna-weight-bold);
	line-height: var(--kna-leading-snug);
}

/* ==========================================================================
 * 2. Boutons — retour et envoi
 *
 * Le module applique `wsx-bg-primary` (violet). On le ramène à la charte.
 * `!important` est assumé : il faut battre une règle du module chargée après.
 * ========================================================================== */

.wsx-conversation-wrapper .wsx-btn.wsx-bg-primary,
.wsx-conversation-wrapper .wsx-go-back,
.wsx-conversation-list-wrapper .wsx-btn.wsx-bg-primary {
	background-color: var(--kna-color-brand) !important;
	border-color: var(--kna-color-brand) !important;
	color: #ffffff !important;
}

.wsx-conversation-wrapper .wsx-btn.wsx-bg-primary:hover,
.wsx-conversation-wrapper .wsx-go-back:hover,
.wsx-conversation-list-wrapper .wsx-btn.wsx-bg-primary:hover {
	background-color: var(--kna-color-brand-hover) !important;
	border-color: var(--kna-color-brand-hover) !important;
}

/* Bouton « Envoyer le message » — cible le bouton de soumission du formulaire. */
.wsx-conversation-wrapper #wholesalex_conversation_submit,
.wsx-conversation-wrapper button#wholesalex_conversation_submit {
	background-color: var(--kna-color-brand);
	border: 1px solid var(--kna-color-brand);
	border-radius: 4px;
	color: #ffffff;
	cursor: pointer;
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-md);
	font-weight: var(--kna-weight-semibold);
	line-height: 1;
	min-height: 44px; /* cible tactile */
	padding: var(--kna-space-sm) var(--kna-space-md);
}

.wsx-conversation-wrapper #wholesalex_conversation_submit:hover {
	background-color: var(--kna-color-brand-hover);
	border-color: var(--kna-color-brand-hover);
}

/* ==========================================================================
 * 3. Focus clavier — visible et jamais supprimé
 * ========================================================================== */

.wsx-conversation-wrapper a:focus-visible,
.wsx-conversation-wrapper button:focus-visible,
.wsx-conversation-wrapper input:focus-visible,
.wsx-conversation-wrapper textarea:focus-visible,
.wsx-conversation-wrapper select:focus-visible,
.wsx-conversation-list-wrapper a:focus-visible,
.wsx-conversation-list-wrapper button:focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

/* ==========================================================================
 * 4. Liste des conversations
 * ========================================================================== */

.wsx-conversation-list-wrapper table {
	border-collapse: collapse;
	width: 100%;
}

.wsx-conversation-list-wrapper th {
	background-color: var(--kna-color-surface-light);
	border-bottom: 1px solid var(--kna-color-card-border);
	color: var(--kna-color-text-strong);
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-semibold);
	letter-spacing: 0.02em;
	padding: var(--kna-space-sm);
	text-align: left;
}

.wsx-conversation-list-wrapper td {
	border-bottom: 1px solid var(--kna-color-card-border);
	padding: var(--kna-space-sm);
	vertical-align: middle;
}

.wsx-conversation-list-wrapper tbody tr:hover {
	background-color: var(--kna-color-surface-light);
}

.wsx-conversation-list-wrapper a {
	color: var(--kna-color-link);
	text-decoration: none;
}

.wsx-conversation-list-wrapper a:hover {
	color: var(--kna-color-link-hover);
	text-decoration: underline;
}

.wsx-conversation-time,
.wsx-conversation-date {
	color: var(--kna-color-text-muted);
	font-size: var(--kna-font-size-sm);
}

/* ==========================================================================
 * 5. Fil de discussion
 * ========================================================================== */

.wsx-conversation-wrapper .wsx-conversation-body {
	display: flex;
	flex-direction: column;
	gap: var(--kna-space-sm);
	margin: var(--kna-space-md) 0;
}

.wsx-conversation-wrapper .wsx-reply-left,
.wsx-conversation-wrapper .wsx-reply-right {
	border-radius: 6px;
	font-size: var(--kna-font-size-md);
	line-height: var(--kna-leading-normal);
	max-width: min(100%, 720px);
	padding: var(--kna-space-sm) var(--kna-space-md);
	word-break: break-word;
}

/* Messages du client : vert pâle. Messages de l'administration : surface neutre. */
.wsx-conversation-wrapper .wsx-reply-right {
	align-self: flex-end;
	background-color: var(--kna-color-accent-soft);
	border: 1px solid rgba(14, 91, 50, 0.18);
	color: var(--kna-color-text-strong);
}

.wsx-conversation-wrapper .wsx-reply-left {
	align-self: flex-start;
	background-color: var(--kna-color-muted-surface);
	border: 1px solid var(--kna-color-card-border);
	color: var(--kna-color-text-strong);
}

/* ==========================================================================
 * 6. Tableau des produits demandés — lisibilité
 *
 * Le tableau est rendu par `get_order_table()` du module : on ne peut pas
 * modifier son balisage (fichier d'extension). On agit donc par styles, sur les
 * classes réellement émises (`wsx-quote-table*`, `wsx-table-product-name`).
 * ========================================================================== */

.wsx-quote {
	overflow-x: auto; /* le tableau ne déborde pas de la page sur mobile */
	-webkit-overflow-scrolling: touch;
}

.wsx-quote-heading {
	color: var(--kna-color-brand);
	font-size: var(--kna-font-size-md);
	font-weight: var(--kna-weight-bold);
	margin: var(--kna-space-md) 0 var(--kna-space-xs);
}

.wsx-quote-table {
	border: 1px solid var(--kna-color-card-border);
	border-radius: 6px;
	min-width: 520px; /* en deçà, les colonnes deviennent illisibles */
	overflow: hidden;
	width: 100%;
}

.wsx-quote-table-head {
	background-color: var(--kna-color-surface-light);
}

.wsx-quote-table-row {
	display: grid;
	gap: var(--kna-space-xs);
	grid-template-columns: minmax(180px, 2.5fr) repeat(2, minmax(70px, 1fr));
	padding: var(--kna-space-sm);
}

.wsx-quote-table-body .wsx-quote-table-row + .wsx-quote-table-row,
.wsx-quote-table-body .wsx-quote-table-row {
	border-top: 1px solid var(--kna-color-card-border);
}

.wsx-quote-table-item {
	align-self: center;
	font-size: var(--kna-font-size-md);
}

.wsx-quote-table-head .wsx-quote-table-item {
	color: var(--kna-color-text-muted);
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/*
 * NOM DU PRODUIT — lisible, et surtout distinguable de sa VARIATION.
 *
 * Le module place le nom complet dans `product_title`, variation comprise
 * (« Résine CBD Afghan Cream - 5g ») : le nom est donc déjà identifiable. On
 * garantit qu'il ne soit ni tronqué ni écrasé par la mise en page.
 */
.wsx-quote-table-item.wsx-table-product-name {
	line-height: var(--kna-leading-snug);
	min-width: 0;
}

.wsx-quote-table-item.wsx-table-product-name a,
.wsx-quote-table-item.wsx-table-product-name .wsx-link {
	color: var(--kna-color-link);
	font-weight: var(--kna-weight-semibold);
	overflow-wrap: anywhere;
	text-decoration: none;
}

.wsx-quote-table-item.wsx-table-product-name a:hover {
	color: var(--kna-color-link-hover);
	text-decoration: underline;
}

/* Le repli « tooltip » du module répète le nom : on le neutralise à l'écran. */
.wsx-quote-table-item .wsx-tooltip-content {
	display: none;
}

.wsx-quote-table-footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kna-space-md);
	margin-top: var(--kna-space-sm);
}

.wsx-quote-table-text {
	color: var(--kna-color-text-strong);
	font-size: var(--kna-font-size-md);
	font-weight: var(--kna-weight-semibold);
}

/* ==========================================================================
 * 7. Formulaire de réponse
 * ========================================================================== */

.wsx-conversation-wrapper textarea,
.wsx-conversation-wrapper input[type='text'],
.wsx-conversation-wrapper input[type='email'] {
	border: 1px solid var(--kna-color-card-border);
	border-radius: 4px;
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-md);
	min-height: 120px;
	padding: var(--kna-space-sm);
	width: 100%;
}

.wsx-conversation-wrapper textarea:focus,
.wsx-conversation-wrapper input[type='text']:focus,
.wsx-conversation-wrapper input[type='email']:focus {
	border-color: var(--kna-color-brand);
}

/* ==========================================================================
 * 8. Responsive
 * ========================================================================== */

@media (max-width: 767px) {
	.wsx-conversation-header {
		font-size: var(--kna-font-size-md);
	}

	.wsx-conversation-wrapper .wsx-reply-left,
	.wsx-conversation-wrapper .wsx-reply-right {
		max-width: 100%;
	}

	.wsx-quote-table {
		min-width: 460px; /* défilement horizontal plutôt que colonnes écrasées */
	}

	/* Bloc de conversation — le tableau d'offre est plus large (4 colonnes). */
	.wsx-reply-lists .wsx-quote-table-row {
		grid-template-columns: minmax(120px, 2fr) repeat(2, minmax(64px, 1fr));
	}

	.wsx-reply-lists .wsx-quote-table-row.wsx-quote-item-4 {
		grid-template-columns: minmax(120px, 2fr) repeat(3, minmax(56px, 1fr));
	}

	.wsx-reply-lists .wsx-quote-table {
		min-width: 440px; /* en deçà, on préfère le défilement horizontal */
	}
}

@media (max-width: 480px) {
	.wsx-conversation-list-wrapper table,
	.wsx-conversation-list-wrapper thead,
	.wsx-conversation-list-wrapper tbody,
	.wsx-conversation-list-wrapper tr,
	.wsx-conversation-list-wrapper td {
		display: block;
		width: 100%;
	}

	.wsx-conversation-list-wrapper thead {
		/* Les en-têtes n'ont plus de sens en colonnes empilées. */
		display: none;
	}

	.wsx-conversation-list-wrapper tr {
		border: 1px solid var(--kna-color-card-border);
		border-radius: 6px;
		margin-bottom: var(--kna-space-sm);
		padding: var(--kna-space-xs);
	}

	/* Bloc de conversation — bulles plus compactes sur très petit écran. */
	.wsx-reply-lists .wsx-quote,
	.wsx-reply-lists .wsx-message {
		padding: var(--kna-space-xs);
	}
}

/* ==========================================================================
 * 9. Respect de « mouvement réduit »
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wsx-conversation-wrapper *,
	.wsx-conversation-list-wrapper * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ==========================================================================
 * BLOC DE CONVERSATION — issu du complément « offre »
 * ==========================================================================
 *
 * Contenu consolidé dans CETTE feuille : le lot L11 la charge déjà, aucune
 * nouvelle feuille et aucun `require_once` supplémentaire ne sont nécessaires.
 *
 * Tous les sélecteurs ci-dessous ont été RELEVÉS dans le DOM réel rendu par le
 * module, puis confrontés aux feuilles du plugin. Aucun sélecteur deviné.
 *
 * PORTÉE : espace client uniquement. `--color-primary` est redéfini LOCALEMENT
 * sous `.wsx-reply-lists` et `.wsx-conversation-header` — jamais sur `:root`.
 * Le reste du plugin et l'administration ne sont pas touchés.
 *
 * Aucun libellé HT/TTC. Aucune couleur inventée : uniquement `tokens.css`.
 * ========================================================================== */
/* ==========================================================================
 * 1. Palette — reprise du violet, PORTÉE LIMITÉE
 * ========================================================================== */

.wsx-reply-lists,
.wsx-conversation-header {
	--color-primary: var(--kna-color-brand);          /* #0e5b32 */
	--color-orchid: var(--kna-color-brand-hover);      /* survol des liens */
}

/* Le bouton Retour : le module le peint en violet via wsx-bg-primary. */
.wsx-conversation-wrapper .wsx-btn.wsx-bg-primary.wsx-go-back {
	background-color: var(--kna-color-brand) !important;
	border-color: var(--kna-color-brand) !important;
	color: #ffffff !important;
}

.wsx-conversation-wrapper .wsx-btn.wsx-bg-primary.wsx-go-back:hover {
	background-color: var(--kna-color-brand-hover) !important;
	border-color: var(--kna-color-brand-hover) !important;
}

/* ==========================================================================
 * 2. Bulles de conversation
 * ========================================================================== */

.wsx-reply-lists .wsx-quote,
.wsx-reply-lists .wsx-message {
	border-radius: 6px;
	padding: var(--kna-space-sm) var(--kna-space-md);
	color: var(--kna-color-text-strong);
	font-size: var(--kna-font-size-md);
	line-height: var(--kna-leading-normal);
	overflow-wrap: anywhere;   /* le titre corrompu ne doit pas déborder */
}

/* Réponse de l'administration : vert pâle de la charte. */
.wsx-reply-lists.wsx-reply-left .wsx-quote,
.wsx-reply-lists.wsx-reply-left .wsx-message {
	background-color: var(--kna-color-accent-soft);
	border: 1px solid rgba(14, 91, 50, 0.18);
}

/* Message du client : surface neutre. */
.wsx-reply-lists.wsx-reply-right .wsx-quote,
.wsx-reply-lists.wsx-reply-right .wsx-message {
	background-color: var(--kna-color-muted-surface);
	border: 1px solid var(--kna-color-card-border);
	color: var(--kna-color-text-strong);
}

/* Le module force le texte en clair sur les bulles de droite : on rétablit. */
.wsx-reply-lists.wsx-reply-right .wsx-quote-table-text,
.wsx-reply-lists.wsx-reply-right .wsx-quote-table-text .woocommerce-Price-amount {
	color: var(--kna-color-text-strong);
}

/* ==========================================================================
 * 3. Tableau de devis — lisibilité et débordement HORIZONTAL
 * ========================================================================== */

/*
 * Le retour à la ligne est autorisé : c'est ce qui supprime le débordement
 * horizontal dû au `white-space: nowrap` et aux `min-width` du module.
 * `overflow-x: auto` est conservé en repli, pour les écrans trop étroits.
 *
 * La contrainte verticale n'est pas déclarée ici : couplée à `overflow-x`,
 * une valeur verticale « visible » serait de toute façon recalculée en
 * « auto » par le navigateur. L'absence de barre de défilement vertical n'est
 * pas prouvée par analyse statique ; elle reste à observer sur le rendu réel.
 */
.wsx-reply-lists .wsx-quote-table {
	white-space: normal;
	overflow-x: auto;          /* repli horizontal conservé */
	border: 1px solid var(--kna-color-card-border);
	border-radius: 6px;
}

.wsx-reply-lists .wsx-quote-table-head {
	background-color: var(--kna-color-surface-light);
	color: var(--kna-color-text-muted);
}

.wsx-reply-lists .wsx-quote-table-row {
	padding: var(--kna-space-sm) var(--kna-space-md);
	gap: var(--kna-space-xs);
}

/* Les minima du module sont réduits : ils forçaient le débordement. */
.wsx-reply-lists .wsx-quote-table-item {
	min-width: 0;
}

.wsx-reply-lists .wsx-quote-table-item.wsx-table-product-name {
	min-width: 0;
}

/* Le nom du produit revient à la ligne et cesse d'être tronqué. */
.wsx-reply-lists a.wsx-quote-item-link {
	color: var(--kna-color-link);
	display: block;
	max-width: none;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
	overflow-wrap: anywhere;
	font-weight: var(--kna-weight-semibold);
}

.wsx-reply-lists a.wsx-quote-item-link:hover {
	color: var(--kna-color-link-hover);
}

/* Le repli « tooltip » du module répète le nom : on le neutralise à l'écran. */
.wsx-reply-lists .wsx-tooltip-content {
	display: none;
}

.wsx-reply-lists .wsx-quote-table-text {
	color: var(--kna-color-text-strong);
	font-size: var(--kna-font-size-md);
}

.wsx-reply-lists .wsx-quote-table-footer {
	gap: var(--kna-space-md);
	margin-top: var(--kna-space-sm);
}

/* ==========================================================================
 * 4. En-tête de fil, bouton retour
 * ========================================================================== */

.wsx-conversation-header {
	color: var(--kna-color-brand);
	font-size: var(--kna-font-size-lg);
	font-weight: var(--kna-weight-bold);
	line-height: var(--kna-leading-snug);
	margin-bottom: var(--kna-space-md);
}

.wsx-conversation-wrapper .wsx-btn.wsx-bg-primary.wsx-go-back {
	border-radius: 4px;
	min-height: 44px;                 /* cible tactile */
	padding: var(--kna-space-xs) var(--kna-space-md);
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-md);
	font-weight: var(--kna-weight-semibold);
}

/* ==========================================================================
 * 5. Focus clavier — conservé sur tous les éléments interactifs
 * ========================================================================== */

.wsx-conversation-wrapper a:focus-visible,
.wsx-conversation-wrapper button:focus-visible {
	outline: 2px solid var(--kna-color-brand);
	outline-offset: 2px;
}

/* Les boutons Accepter / Refuser de l'offre doivent rester atteignables. */
.wsx-reply-lists .wsx-btn-group a.wsx-link {
	display: inline-block;
	min-height: 32px;
	line-height: 32px;
	padding: 0 var(--kna-space-sm);
	color: var(--kna-color-link);
}

/* ==========================================================================
 * 7. Respect de « mouvement réduit »
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wsx-reply-lists *,
	.wsx-conversation-wrapper * {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ==========================================================================
 * 9. DISPOSITION MOBILE — 767 px et moins
 * ==========================================================================
 *
 * Portée : uniquement les écrans de conversation, sous 768 px. La présentation
 * au-dessus de 768 px n'est pas modifiée.
 *
 * Principe : aucune réduction de police, aucun masquage de contenu. Seules la
 * largeur disponible et la disposition changent.
 * ========================================================================== */

@media (max-width: 767px) {
	/* ----------------------------------------------------------------------
	 * 8.1 Navigation du compte — hauteur réduite, défilement horizontal
	 * ----------------------------------------------------------------------
	 * Relevé du défaut (mesuré) : `ul` de 334 px de haut (7 entrées de 48 px)
	 * sur un écran de 375 px, soit près de la moitié de la zone utile.
	 *
	 * La navigation est un composant du module externe : elle n'est NI
	 * supprimée, NI repliée derrière un bouton, NI restreinte en contenu.
	 * Les 7 destinations restent toutes présentes et atteignables ; seule
	 * leur disposition passe en ligne, avec défilement horizontal.
	 *
	 * Aucun `overflow: hidden` : le défilement horizontal est conservé pour
	 * que la dernière entrée reste atteignable.
	 */
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--kna-space-xs);
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	.woocommerce-MyAccount-navigation li {
		flex: 0 0 auto;
		margin: 0;
	}

	.woocommerce-MyAccount-navigation li a {
		display: block;
		white-space: nowrap;      /* libellé sur une seule ligne */
		min-height: 40px;
		padding: var(--kna-space-xs) var(--kna-space-sm);
		font-size: var(--kna-font-size-sm);
		border-radius: 4px;
	}

	/* La disposition d'origine revient au-dessus de 768 px : inchangée. */
	.wsx-conversation-header {
		font-size: var(--kna-font-size-md);
		flex-wrap: wrap;          /* titre + bouton Retour ne se chevauchent plus */
		gap: var(--kna-space-xs);
	}

	/* ----------------------------------------------------------------------
	 * 8.2 Bulles de conversation — largeur réellement utilisable
	 * ----------------------------------------------------------------------
	 * Le module plafonne la bulle à 46 % de la largeur de l'écran, et réduit
	 * au contenu aussi bien la bulle que ses deux enveloppes successives. La
	 * largeur disponible est donc rompue à chaque niveau : `width: 100%` sur
	 * un enfant dont le parent est en largeur automatique se résout contre la
	 * largeur du contenu, pas contre la largeur disponible.
	 *
	 * Les trois niveaux sont donc remplis explicitement. Aucune réduction de
	 * police n'est utilisée : seule la largeur change.
	 */
	.wsx-reply-lists,
	.wsx-reply-lists .wsx-message-container,
	.wsx-reply-lists .wsx-message-wrapper {
		width: 100%;
		max-width: 100%;
	}

	/* ----------------------------------------------------------------------
	 * 8.2.0 Rembourrages — un seul niveau, et seulement sur la conversation
	 * ----------------------------------------------------------------------
	 * Trois rembourrages se cumulaient : 24 px du conteneur de page, 18 px du
	 * contenu de compte, 40 px du cadre de conversation. On n'en conserve
	 * qu'un, celui du cadre, ramené à 16 px.
	 *
	 * PORTÉE — `.woocommerce-MyAccount-content` sert à TOUS les écrans du
	 * compte (tableau de bord, commandes, adresses, détails), pas seulement
	 * aux conversations. Le sélecteur est donc restreint par `:has()` à la
	 * page qui contient effectivement une conversation. Repère utilisé :
	 * `.wsx-conversation-title`, présent uniquement dans ce cas.
	 * Les autres écrans du compte conservent leur rembourrage.
	 *
	 * Les classes utilitaires `wsx-p-32` et `wsx-plr-40` ne sont pas
	 * modifiées : le cadre est visé par la combinaison de ses six classes.
	 */
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content:has(.wsx-conversation-title) {
		padding-left: 0;
		padding-right: 0;
	}

	/* Cadre de la conversation : seul niveau de rembourrage conservé. */
	.wsx-br-md.wsx-border-default.wsx-bc-border-primary.wsx-p-32.wsx-plr-40.wsx-bg-base4 {
		padding: 16px;
	}

	/* Le titre du fil est un FRÈRE du cadre, pas un enfant : il n'hérite donc
	   pas de son rembourrage. En production, les deux s'alignaient parce que
	   le cadre portait 40 px et que le titre commençait au même bord. En
	   ramenant le cadre à 16 px, le titre se serait retrouvé 17 px à gauche
	   du contenu. On lui applique le MÊME retrait, pour rétablir
	   l'alignement constaté en production. */
	.wsx-conversation-title {
		padding-left: 16px;
		padding-right: 16px;
	}

	.wsx-reply-lists .wsx-message,
	.wsx-reply-lists .wsx-quote {
		max-width: 100%;
		box-sizing: border-box;
	}

	.wsx-reply-lists .wsx-message {
		/* Le `width: fit-content` du module est remplacé par un remplissage
		   réel de la largeur disponible.

		   AUCUNE marge de gouttière n'est ajoutée : mesuré, une marge
		   latérale réduisait la boîte de la bulle de 207 px à 195 px, car un
		   élément flex se rétracte pour absorber sa propre marge. Le retrait
		   du cadre fournit déjà 40 px de chaque côté. */
		width: 100%;
		min-width: 0;
		flex: 1 1 auto;
		margin-left: 0;
		margin-right: 0;
	}

	/* ----------------------------------------------------------------------
	 * 8.2.1 Cadres imbriqués — un niveau aplati
	 * ----------------------------------------------------------------------
	 * Trois cadres se succédaient entre la bulle et son contenu : la bulle,
	 * `.wsx-quote`, puis `.wsx-quote-request-heading`. Le rembourrage du
	 * cadre intermédiaire est supprimé : il ne portait qu'un fond, et la
	 * bulle assure déjà la mise à distance. Son fond et sa bordure sont
	 * conservés.
	 */
	.wsx-reply-lists .wsx-quote {
		width: 100%;
		padding: 0;
	}

	.wsx-reply-lists .wsx-quote-request-heading {
		padding: 0;
	}

	/* Réduction du gigotage vertical du bloc offre. */
	.wsx-reply-lists {
		margin-bottom: var(--kna-space-md);
	}

	.wsx-reply-meta {
		font-size: var(--kna-font-size-sm);
	}

	/* ----------------------------------------------------------------------
	 * 8.3 Tableau de devis — cellules empilées et étiquetées
	 * ----------------------------------------------------------------------
	 * Le module impose une grille `2fr repeat(2, 1fr)` avec des minima de
	 * 100 px et 140 px : leur somme dépasse la largeur de la bulle, et les
	 * colonnes Prix et Quantité sortaient de la zone visible.
	 *
	 * Les cellules sont donc empilées : le produit sur toute la largeur, puis
	 * un libellé et sa valeur par ligne. Aucune information n'est masquée et
	 * le défilement horizontal n'est plus nécessaire.
	 *
	 * DEUX FORMATS EXISTENT, et les deux sont traités :
	 *   - trois cellules : produit, prix, quantité ;
	 *   - quatre cellules (classe `wsx-quote-item-4`, remise affichée par
	 *     l'administration) : produit, prix, quantité, remise.
	 * Le libellé de la remise n'existe pas dans le module : il est porté par
	 * la feuille, comme ceux du prix et de la quantité.
	 */
	.wsx-reply-lists .wsx-quote-table,
	.wsx-reply-lists .wsx-quote-table-head,
	.wsx-reply-lists .wsx-quote-table-body {
		min-width: 0;
		width: 100%;
	}

	/* L'en-tête de colonnes devient inutile : chaque valeur est étiquetée. */
	.wsx-reply-lists .wsx-quote-table-head {
		display: none;
	}

	.wsx-reply-lists .wsx-quote-table-row,
	.wsx-reply-lists .wsx-quote-table-row.wsx-quote-item-4 {
		display: grid;
		/* Le libellé prend la largeur de son texte, la valeur prend le reste. */
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--kna-space-xs) var(--kna-space-sm);
		padding: var(--kna-space-sm);
	}

	.wsx-reply-lists .wsx-quote-table-row > .wsx-quote-table-item {
		min-width: 0;
	}

	/* Le produit occupe seul la première ligne, sur toute la largeur. */
	.wsx-reply-lists .wsx-quote-table-row > .wsx-table-product-name {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	/* Prix puis quantité sur la deuxième ligne ; la remise, quand elle est
	   présente, sur la troisième. Les cellules sont placées explicitement :
	   l'ordre d'affichage ne dépend donc pas de leur ordre dans le gabarit. */
	.wsx-reply-lists .wsx-quote-table-body .wsx-quote-table-row > .wsx-quote-table-item:nth-child(2) {
		grid-row: 2;
	}

	.wsx-reply-lists .wsx-quote-table-body .wsx-quote-table-row > .wsx-quote-table-item:nth-child(3) {
		grid-row: 2;
		overflow-wrap: normal;
		white-space: nowrap;
	}

	.wsx-reply-lists .wsx-quote-table-body .wsx-quote-table-row > .wsx-quote-table-item:nth-child(4) {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	/* Libellé placé devant chaque valeur. Le contenu du module n'est pas
	   réécrit : seul un libellé est ajouté par la feuille. */
	.wsx-reply-lists .wsx-quote-table-body .wsx-quote-table-row > .wsx-quote-table-item::before {
		display: block;
		color: var(--kna-color-text-muted);
		font-size: var(--kna-font-size-sm);
		font-weight: var(--kna-weight-regular);
		margin-bottom: 2px;
		white-space: nowrap;
		overflow-wrap: normal;
		word-break: keep-all;
	}

	.wsx-reply-lists .wsx-quote-table-body .wsx-quote-table-row > .wsx-quote-table-item:nth-child(2)::before {
		content: 'Prix';
	}

	.wsx-reply-lists .wsx-quote-table-body .wsx-quote-table-row > .wsx-quote-table-item:nth-child(3)::before {
		content: 'Quantité';
	}

	/* Le quatrième libellé ne s'applique qu'au format à quatre cellules :
	   dans le format à trois, la troisième cellule est la quantité. */
	.wsx-reply-lists .wsx-quote-table-body .wsx-quote-table-row > .wsx-quote-table-item:nth-child(4)::before {
		content: 'Remise';
	}

	/* La cellule produit n'a pas besoin de libellé : son contenu l'identifie. */
	.wsx-reply-lists .wsx-quote-table-body .wsx-quote-table-row > .wsx-table-product-name::before {
		content: none;
	}

	/* Nom du produit : affiché EN ENTIER, sur plusieurs lignes si nécessaire.
	   Le module le tronque (nowrap + ellipse + max-width 8rem) : la troncature
	   est retirée, aucun texte n'est masqué pour faire tenir la fiche. */
	.wsx-reply-lists a.wsx-quote-item-link {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		max-width: 100%;
		overflow-wrap: anywhere;   /* un mot très long ne déborde pas */
	}

	/* Les totaux du pied de tableau : libellé à gauche, montant à droite. */
	.wsx-reply-lists .wsx-quote-table-footer {
		flex-direction: column;
		align-items: stretch;
		gap: var(--kna-space-xs);
	}

	.wsx-reply-lists .wsx-quote-table-footer > * {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--kna-space-sm);
	}

	/* Les MONTANTS ne se coupent jamais en plein mot.
	   Le module applique `overflow-wrap: anywhere` sur les bulles, ce qui
	   coupait « 3,10 € » en « 3,10 » puis « € » à 320 px. Une valeur
	   monétaire coupée devient illisible : on interdit la césure ici, et le
	   libellé reste seul à pouvoir se replier si nécessaire. */
	.wsx-reply-lists .wsx-quote-table-footer .woocommerce-Price-amount,
	.wsx-reply-lists .wsx-quote-table-body .woocommerce-Price-amount,
	.wsx-reply-lists .wsx-quote-table-text {
		overflow-wrap: normal;
		word-break: keep-all;
		white-space: nowrap;
	}

	/* ----------------------------------------------------------------------
	 * 8.4 Boutons « Accepter » / « Refuser » — libellés sur une seule ligne
	 * ----------------------------------------------------------------------
	 * Le module place le groupe DANS la bulle, avec un écart de 16 px. Les
	 * libellés contiennent en outre une espace de tête, qui est un point de
	 * coupure : le texte se repliait caractère par caractère.
	 *
	 * Deux causes se cumulent sur la largeur :
	 *   - le module cible les deux conteneurs par un sélecteur d'identifiant,
	 *     avec 14 px de rembourrage, ce qu'un sélecteur de classes ne peut pas
	 *     battre ;
	 *   - ces conteneurs se réduisent à la largeur de leur contenu.
	 *
	 * Les conteneurs sont donc ciblés par leurs identifiants, leur rembourrage
	 * ramené à zéro, et les boutons empilés en pleine largeur : deux cibles
	 * tactiles de 44 px de haut.
	 */
	.wsx-reply-lists .wsx-btn-group {
		flex-direction: column;
		align-items: stretch;
		gap: var(--kna-space-xs);
	}

	.wsx-reply-lists .wsx-btn-group > div {
		width: 100%;
	}

	.wsx-reply-lists .wsx-btn-group,
	.wsx-reply-lists .wsx-btn-group > div,
	.wsx-reply-lists #quote_accept_button,
	.wsx-reply-lists #quote_reject_button {
		width: 100% !important;
		min-width: 100%;
		box-sizing: border-box;
	}

	.wsx-reply-lists .wsx-btn-group > div,
	.wsx-reply-lists #quote_accept_button,
	.wsx-reply-lists #quote_reject_button {
		padding: 0;
	}

	.wsx-reply-lists .wsx-btn-group a.wsx-link {
		display: block;
		/* `!important` est ASSUMÉ, comme pour le bouton Retour plus haut, et pour
		   la même raison : le module est chargé APRÈS cette feuille. Constaté —
		   sans `!important`, le lien restait à 72 px de large alors que son
		   conteneur en fait 149 px, malgré `width: 100%` et une spécificité
		   supérieure. C'est la largeur de la cible tactile qui est en jeu. */
		width: 100% !important;
		min-width: 100%;
		min-height: 44px;         /* cible tactile */
		line-height: 44px;
		padding: 0 var(--kna-space-sm);
		text-align: center;
		white-space: nowrap;      /* le libellé ne se coupe plus jamais */
		overflow-wrap: normal;
		word-break: keep-all;
		border-radius: 4px;
		text-decoration: none;
	}

	#quote_accept_button a.wsx-link {
		background-color: var(--kna-color-brand);
		color: #ffffff;
	}

	#quote_reject_button a.wsx-link {
		border: 1px solid var(--kna-color-card-border);
		color: var(--kna-color-text-strong);
	}
}