/* CHAT ACHETEUR ↔ VENDEUR — version 1 (cahier des charges du fondateur, 2026-10-04). Un seul composant (lansiow-chat.js),
   deux modes : « acheteur » (mes-achats.html, commande.html) et « vendeur » (tableau-de-bord.html).
   Polices : Instrument Serif (grands titres), Plus Jakarta Sans (le reste). */
.lc-scope, .lc-root, .lc-vpage, .lc-fab, .lc-quick {
  --lc-ink: #18181B; --lc-muted: #71717A; --lc-line: #E7E6E1; --lc-bg1: #F6F6F4; --lc-bg2: #F4F4F2;
  --lc-yellow: #F2B400; --lc-yellow-ink: #7A5700; --lc-yellow-soft: #FDF3D6; --lc-red: #DC2626; --lc-report: #B42318;
  --lc-mine: #FCE9B2; --lc-theirs: #FFFFFF; --lc-green: #15803D; --lc-green-soft: #E7F6EC;
  /* Design WhatsApp (2026-10-09) : fond de conversation chaud + bandeaux gris clair, couleurs Lansiow conservées. */
  --lc-wall: #F3EEE4; --lc-bar: #F7F5F0; --lc-stamp: #8A8578; --lc-read: #1D9BD1;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; color: var(--lc-ink);
}
.lc-root *, .lc-vpage *, .lc-fab *, .lc-quick * { box-sizing: border-box; }
.lc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Panneau (acheteur ; panneau rapide du vendeur) ---------- */
.lc-root { position: fixed; inset: 0; z-index: 160; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.lc-root.open { opacity: 1; visibility: visible; }
.lc-backdrop { position: absolute; inset: 0; background: rgba(20, 25, 46, 0.78); }
.lc-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0, 0, 0, .12); transform: translateX(24px); transition: transform .22s ease; }
.lc-root.open .lc-panel { transform: none; }
@media (max-width: 767px) { .lc-panel { width: 100%; box-shadow: none; } }
/* Chat de l'ACHETEUR sur ordinateur = même carte flottante que le panneau rapide du vendeur (.lc-quick, demande du
   fondateur 2026-10-09) : en bas à droite au-dessus de la bulle, sans fond sombre, la page reste utilisable dessous. */
@media (min-width: 768px) {
  .lc-root.lc-buyer { pointer-events: none; }
  .lc-root.lc-buyer .lc-backdrop { display: none; }
  .lc-root.lc-buyer .lc-panel { pointer-events: auto; top: auto; left: auto; right: 24px; bottom: 96px; width: 400px; max-width: calc(100vw - 48px); height: min(620px, calc(100vh - 120px)); border-radius: 18px; border: 1px solid var(--lc-line); box-shadow: 0 18px 48px rgba(0, 0, 0, .18); overflow: hidden; transform: translateY(8px); transition: transform .18s ease; }
  .lc-root.lc-buyer.open .lc-panel { transform: none; }
}

.lc-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--lc-line); min-height: 64px; flex-shrink: 0; background: var(--lc-bar); }
.lc-head-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.lc-head-text { min-width: 0; }
.lc-head-title { font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-head-sub { font-size: 12.5px; color: var(--lc-muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Photo du vendeur (2026-10-04) : badge rond posé en bas à droite de la couverture du produit, comme le badge de
   type des vignettes produit ; la ligne du nom passe en « … » si elle est trop longue (390 px). */
.lc-thumb-wrap { position: relative; flex-shrink: 0; display: inline-flex; margin-right: 16px; }
.lc-seller-badge { position: absolute; right: -16px; bottom: -10px; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(20, 25, 46, 0.2); background: var(--lc-yellow-soft); color: var(--lc-yellow-ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; }
.lc-seller-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-head-seller { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.lc-head-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.lc-icon-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--lc-bg2); color: var(--lc-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.lc-icon-btn:hover { background: #ECEBE7; }
.lc-icon-btn[hidden] { display: none; }
.lc-thumb { width: 40px; height: 40px; border-radius: 10px; background: var(--lc-bg2) center/cover no-repeat; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--lc-muted); }
.lc-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--lc-yellow-soft); color: var(--lc-yellow-ink); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

.lc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lc-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px; }
.lc-h { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0 0 6px; color: var(--lc-ink); }
.lc-p { font-size: 14px; color: var(--lc-muted); line-height: 1.55; margin: 0 0 16px; }
.lc-empty { text-align: center; color: var(--lc-muted); font-size: 14px; line-height: 1.55; padding: 36px 12px; }

/* ---------- Listes (achats de l'acheteur, conversations du vendeur) ---------- */
/* Liste façon WhatsApp (2026-10-09) : photo ronde 48 px, fine ligne de séparation sous le texte, heure en couleur
   et pastille ronde quand il y a des non-lus. */
.lc-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.lc-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 0 12px; min-height: 72px; border: none; border-radius: 10px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.lc-row:hover { background: var(--lc-bg1); }
.lc-row.active { background: var(--lc-yellow-soft); }
.lc-row-main { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 10px 0; border-bottom: 1px solid var(--lc-line); }
.lc-list li:last-child .lc-row-main, .lc-row:hover .lc-row-main, .lc-row.active .lc-row-main { border-bottom-color: transparent; }
.lc-row .lc-thumb, .lc-row .lc-avatar { width: 48px; height: 48px; border-radius: 50%; font-size: 15px; }
.lc-row.unread .lc-row-time { color: var(--lc-yellow-ink); font-weight: 700; }
.lc-row-top { display: flex; align-items: baseline; gap: 8px; }
.lc-row-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-row-time { flex-shrink: 0; font-size: 12px; color: var(--lc-muted); }
.lc-row-sub { font-size: 12.5px; color: var(--lc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-row-ex { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lc-row-ex span:first-child { flex: 1; min-width: 0; font-size: 13px; color: #52525B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-row.unread .lc-row-ex span:first-child { color: var(--lc-ink); font-weight: 600; }
.lc-row-state { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }
.lc-row-state.draft { color: #B45309; font-weight: 600; }
.lc-row-state.draft .lc-lock { opacity: 1; }
.lc-lock { display: inline-flex; flex-shrink: 0; opacity: .6; font-style: normal; }
.lc-badge { flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 100px; background: var(--lc-yellow); color: var(--lc-ink); font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.lc-badge[hidden] { display: none; }
.lc-tag { flex-shrink: 0; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 100px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.lc-tag.ok { background: var(--lc-green-soft); color: var(--lc-green); }
.lc-tag.bad { background: #FEE4E2; color: var(--lc-report); }
.lc-tag.wait { background: var(--lc-yellow-soft); color: var(--lc-yellow-ink); }

/* ---------- Pastilles de filtre / sujets ---------- */
.lc-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.lc-chips::-webkit-scrollbar { display: none; }
.lc-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 100px; border: 1px solid var(--lc-line); background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: #52525B; cursor: pointer; white-space: nowrap; }
/* Filtre actif : jaune pâle + texte foncé (comme le vert pâle de WhatsApp ; jamais de pilule noire). */
.lc-chip[aria-pressed="true"] { background: var(--lc-yellow-soft); border-color: #F2D98A; color: var(--lc-yellow-ink); }
.lc-chip .lc-n { font-weight: 700; }
.lc-subjects { border: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lc-subjects legend { font-size: 15px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.lc-radio { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 100px; border: 1px solid var(--field-border, #CFCDC3); background: #fff; font-size: 14px; cursor: pointer; }
.lc-radio input { accent-color: var(--lc-yellow); width: 18px; height: 18px; margin: 0; }
.lc-radio:has(input:checked) { border-color: var(--lc-yellow); background: #fff8e6; font-weight: 600; }

/* ---------- Fil ---------- */
/* Fond à motif (papier peint façon WhatsApp) : petits dessins très pâles — bulle, sac, étoile, cœur, livre, pièce. */
.lc-scroll.lc-wall {
  background-color: var(--lc-wall);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240' fill='none' stroke='%23786A4E' stroke-opacity='0.04' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 40c0-8 7-14 16-14s16 6 16 14-7 14-16 14c-3 0-5 0-7-1l-8 4 2-7c-2-3-3-6-3-10z'/%3E%3Cpath d='M128 20h22l-2 26h-18z'/%3E%3Cpath d='M133 20c0-6 3-9 6-9s6 3 6 9'/%3E%3Cpath d='M206 30l4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Cpath d='M60 118c-6-6-14 0-10 7l10 10 10-10c4-7-4-13-10-7z'/%3E%3Cpath d='M150 104h16c3 0 5 2 5 5v22h-16c-3 0-5-2-5-5z'/%3E%3Cpath d='M171 109c0-3 2-5 5-5h16v27h-16c-3 0-5 2-5 5'/%3E%3Ccircle cx='32' cy='196' r='11'/%3E%3Cpath d='M32 190v12M28 193h6a2 2 0 0 1 0 4h-4a2 2 0 0 0 0 4h6'/%3E%3Cpath d='M112 186l6 6 12-13'/%3E%3Crect x='186' y='176' width='20' height='34' rx='4'/%3E%3Cpath d='M193 204h6'/%3E%3Cpath d='M92 60l3 6 6 1-5 4 1 6-5-3-5 3 1-6-5-4 6-1z'/%3E%3Cpath d='M216 120c0-6 5-10 11-10'/%3E%3Cpath d='M100 230c4-4 10-4 14 0'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
.lc-thread { display: flex; flex-direction: column; gap: 0; }
.lc-sys { align-self: center; text-align: center; font-size: 12px; color: #6B5A2E; background: #FFF6D6; border-radius: 8px; padding: 6px 12px; margin: 0 0 6px; max-width: 92%; box-shadow: 0 1px 0.5px rgba(20, 25, 46, 0.1); }
/* Séparateur de date (Aujourd'hui, Hier, Mercredi, 30 septembre…). */
.lc-day { align-self: center; font-size: 12.5px; font-weight: 600; color: #54656F; background: #fff; border-radius: 8px; padding: 5px 12px; margin: 12px 0 6px; box-shadow: 0 1px 0.5px rgba(20, 25, 46, 0.12); }
.lc-note { align-self: center; width: 100%; max-width: 92%; margin: 12px auto 6px; background: #fff; border: 1px solid var(--lc-line); border-left: 3px solid var(--lc-yellow); border-radius: 12px; padding: 10px 12px; }
.lc-note-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--lc-yellow-ink); margin-bottom: 4px; }
.lc-note-logo { height: 14px; width: auto; flex-shrink: 0; display: block; }
.lc-note-body { font-size: 13.5px; line-height: 1.5; color: var(--lc-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.lc-note .lc-meta { margin-top: 4px; }
/* Bulles façon WhatsApp : heure (+ coches pour mes messages) DANS la bulle en bas à droite, pointe sur le premier
   message d'une série, petit espace entre deux séries. */
.lc-msg { display: flex; flex-direction: column; max-width: 78%; margin-top: 2px; }
.lc-msg.first { margin-top: 8px; }
.lc-msg.mine { align-self: flex-end; align-items: flex-end; }
.lc-msg.theirs { align-self: flex-start; align-items: flex-start; }
.lc-bubble { position: relative; padding: 6px 9px 7px 10px; border-radius: 8px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; box-shadow: 0 1px 0.5px rgba(20, 25, 46, 0.13); }
.lc-msg.mine .lc-bubble { background: var(--lc-mine); }
.lc-msg.theirs .lc-bubble { background: var(--lc-theirs); }
.lc-msg.mine.first .lc-bubble { border-top-right-radius: 0; }
.lc-msg.theirs.first .lc-bubble { border-top-left-radius: 0; }
.lc-msg.first .lc-bubble::before { content: ''; position: absolute; top: 0; width: 8px; height: 13px; }
.lc-msg.mine.first .lc-bubble::before { right: -8px; background: var(--lc-mine); clip-path: polygon(0 0, 100% 0, 0 100%); }
.lc-msg.theirs.first .lc-bubble::before { left: -8px; background: var(--lc-theirs); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.lc-spacer { display: inline-block; width: 40px; height: 1px; }
.lc-spacer.ticks { width: 60px; }
.lc-stamp { position: absolute; right: 8px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; font-size: 11px; line-height: 1; color: var(--lc-stamp); white-space: nowrap; }
.lc-ticks { display: inline-flex; color: var(--lc-stamp); }
.lc-ticks.read { color: var(--lc-read); }
/* « En train d'écrire… » : bulle blanche à pointe, trois points qui sautillent l'un après l'autre (2026-10-09). */
.lc-typing { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 12px 14px; background: var(--lc-theirs); border-radius: 0 8px 8px 8px; box-shadow: 0 1px 0.5px rgba(20, 25, 46, 0.13); animation: lc-typing-in .18s ease; }
.lc-typing::before { content: ''; position: absolute; top: 0; left: -8px; width: 8px; height: 13px; background: var(--lc-theirs); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.lc-dot { width: 7px; height: 7px; border-radius: 50%; background: #A1A1AA; animation: lc-dot 1.2s infinite ease-in-out; }
.lc-dot:nth-of-type(3) { animation-delay: .15s; }
.lc-dot:nth-of-type(4) { animation-delay: .3s; }
@keyframes lc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes lc-typing-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lc-meta { font-size: 11px; color: var(--lc-muted); margin-top: 3px; padding: 0 4px; }

/* ---------- Zone d'écriture ---------- */
/* Barre de saisie façon WhatsApp : bandeau gris clair, champ arrondi, bouton d'envoi carré doré à icône
   (règle Lansiow : fond jaune, icône foncée, coins de 10 px). */
.lc-compose { flex-shrink: 0; border-top: 1px solid var(--lc-line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--lc-bar); }
.lc-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.lc-input { flex: 1; min-width: 0; min-height: 48px; max-height: 160px; resize: none; border: 1px solid var(--field-border, #CFCDC3); border-radius: 24px; padding: 12px 18px; font: inherit; font-size: 15px; line-height: 1.4; color: var(--lc-ink); background: #fff; }
.lc-input:focus { outline: none; border-color: var(--lc-yellow); background: #fff8e6; box-shadow: 0 0 0 3px rgba(242, 180, 0, 0.2); }
.lc-send { flex-shrink: 0; width: 48px; height: 48px; padding: 0; border: none; border-radius: 10px; background: var(--lc-yellow); color: var(--lc-ink); display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.lc-send[disabled] { opacity: .6; cursor: default; }
.lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--lc-muted); }
.lc-report-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin: -12px 0; padding: 0 2px; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--lc-report); cursor: pointer; white-space: nowrap; }
.lc-report-done { font-size: 12.5px; font-weight: 600; color: var(--lc-report); white-space: nowrap; }
.lc-err { color: var(--lc-report); font-size: 13px; margin: 0 0 8px; }
.lc-err:empty { display: none; }
.lc-box { border-radius: 14px; background: var(--lc-bg2); padding: 14px 16px; font-size: 14px; line-height: 1.5; color: #3F3F46; }
.lc-box b { color: var(--lc-ink); }
.lc-box .lc-report-link { margin: 6px 0 -10px; }
.lc-quickreplies { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.lc-quickreplies::-webkit-scrollbar { display: none; }
.lc-qr { flex-shrink: 0; min-height: 36px; padding: 0 14px; border-radius: 100px; border: 1.5px dashed #CFCDC3; background: #fff; font: inherit; font-size: 13px; color: #3F3F46; cursor: pointer; white-space: nowrap; }
.lc-qr:hover { border-color: var(--lc-yellow); background: #fff8e6; }
/* Réponses automatiques (étape 81) : questions fréquentes en boutons, mention dans la bulle. */
.lc-auto { display: block; font-size: 11px; font-weight: 700; color: #7A5700; margin-bottom: 2px; letter-spacing: .01em; }
.lc-faq { flex-wrap: wrap; overflow: visible; }
.lc-faq .lc-qr { white-space: normal; text-align: left; line-height: 1.3; padding: 8px 14px; border-style: solid; }
/* Dans une conversation : une seule ligne qui défile de côté, pour laisser la place aux messages. */
.lc-compose .lc-faq { flex-wrap: nowrap; overflow-x: auto; }
.lc-compose .lc-faq .lc-qr { white-space: nowrap; }
.lc-faq-start { margin-bottom: 14px; }
.lc-faq-title { font-size: 12.5px; font-weight: 700; color: var(--lc-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.lc-faq-answers { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.lc-faq-answers:empty { display: none; }
.lc-faq-more { margin-top: 10px; }

/* ---------- Signalement ---------- */
.lc-form-label { display: block; font-size: 14px; font-weight: 700; margin: 14px 0 8px; }
.lc-textarea { width: 100%; min-height: 110px; resize: vertical; border: 1px solid var(--field-border, #CFCDC3); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.45; color: var(--lc-ink); background: #fff; }
.lc-textarea:focus { outline: none; border-color: var(--lc-yellow); background: #fff8e6; box-shadow: 0 0 0 3px rgba(242, 180, 0, 0.2); }
.lc-count { text-align: right; font-size: 12px; color: var(--lc-muted); margin-top: 4px; }
.lc-btn-report { width: 100%; min-height: 48px; margin-top: 14px; border: none; border-radius: 10px; background: var(--lc-yellow); color: var(--lc-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.lc-btn-report[disabled] { opacity: .6; }

/* ---------- Focus clavier visible ---------- */
.lc-root button:focus-visible, .lc-vpage button:focus-visible, .lc-vpanel button:focus-visible, .lc-quick button:focus-visible, .lc-fab:focus-visible, .lc-root a:focus-visible, .lc-quick a:focus-visible, .lc-radio:has(input:focus-visible) {
  outline: 2px solid var(--lc-yellow-ink); outline-offset: 2px;
}

/* ---------- Vendeur : bouton flottant + panneau rapide (ordinateur uniquement) ---------- */
.lc-fab { position: fixed; right: 24px; bottom: 24px; z-index: 150; width: 60px; height: 60px; border-radius: 50%; border: none; background: #18181B; color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
.lc-fab .lc-badge { position: absolute; top: -2px; right: -2px; border: 2px solid #fff; height: 24px; line-height: 20px; min-width: 24px; }
@media (min-width: 768px) { .lc-fab { display: inline-flex; } .lc-fab.lc-hide { display: none; } .lc-vcol-tools .lc-chips { flex-wrap: wrap; overflow: visible; } }
.lc-quick { position: fixed; right: 24px; bottom: 96px; z-index: 151; width: 400px; max-width: calc(100vw - 48px); height: min(620px, calc(100vh - 120px)); background: #fff; border-radius: 18px; border: 1px solid var(--lc-line); box-shadow: 0 18px 48px rgba(0, 0, 0, .18); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, visibility .18s ease, transform .18s ease; }
.lc-quick.open { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 767px) { .lc-quick { display: none; } }
.lc-quick .lc-order { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px 10px; }
.lc-quick .lc-order-toggle { padding: 0 16px; }
.lc-quick .lc-h-small { flex: 1; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0; }
.lc-quick-filters { padding: 10px 14px 6px; border-bottom: 1px solid var(--lc-line); }
.lc-quick .lc-scroll { padding: 8px 8px; }
.lc-quick-all { flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-height: 48px; border-top: 1px solid var(--lc-line); font-size: 14px; font-weight: 600; color: var(--lc-yellow-ink); background: none; border-left: none; border-right: none; border-bottom: none; font-family: inherit; cursor: pointer; }

/* ---------- Vendeur : page Messages en deux colonnes ---------- */
.lc-vpage { display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 210px); min-height: 520px; border: 1px solid #CFCDC3; border-radius: 18px; background: #fff; overflow: hidden; margin-bottom: 28px; }
.lc-vcol-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--lc-line); }
.lc-vcol-tools { padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--lc-line); }
/* Recherche + calendrier de période côte à côte (fondateur, 2026-10-15) ; l'un sous l'autre sur téléphone. */
.lc-search-row { display: grid; grid-template-columns: minmax(0, 1fr) max(24%, 215px); gap: 12px; align-items: center; }   /* calendrier = 24 % (fondateur, 2026-10-15), jamais trop étroit pour ses dates */
.lc-range-wrap { --st-accent: #C9962B; --st-border: #CFCDC3; min-width: 0; }
.lc-range-wrap .st-range { width: 100%; min-height: 44px; justify-content: center; font-size: 14px; box-sizing: border-box; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.lc-range-wrap .st-range [data-lc-range-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lc-range-wrap .st-range-pop { left: auto; right: 0; }
@media (max-width: 600px) { .lc-search-row { grid-template-columns: 1fr; gap: 10px; } .lc-range-wrap .st-range-pop { right: auto; left: 0; width: min(320px, calc(100vw - 32px)); } }
.lc-search { width: 100%; min-height: 44px; border: 1px solid var(--field-border, #CFCDC3); border-radius: 100px; padding: 0 16px; font: inherit; font-size: 14px; background: #fff; color: var(--lc-ink); }
.lc-search:focus { outline: none; border-color: var(--lc-yellow); background: #fff8e6; box-shadow: 0 0 0 3px rgba(242, 180, 0, 0.2); }
.lc-vcol-list .lc-scroll { padding: 8px; }
.lc-vcol-conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.lc-conv { display: flex; flex-direction: column; flex: 1; min-height: 0; }
@media (min-width: 768px) { .lc-vcol-conv .lc-scroll.lc-wall { padding: 14px 6%; } }
/* 4 informations réparties sur toute la largeur, espacées de façon égale (demande du fondateur, 2026-10-04). */
/* Bandeau commande repliable (design WhatsApp, 2026-10-09) : une ligne cliquable, déplie les 4 informations. */
.lc-order-wrap { flex-shrink: 0; background: var(--lc-bg1); border-bottom: 1px solid var(--lc-line); }
.lc-order-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 24px; border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #52525B; cursor: pointer; text-align: left; }
.lc-order-sum { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-order-chev { display: inline-flex; flex-shrink: 0; transition: transform .2s ease; }
.lc-order-wrap.open .lc-order-chev { transform: rotate(180deg); }
.lc-order-wrap:not(.open) .lc-order { display: none; }
.lc-order { flex-shrink: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px 24px; padding: 0 24px 12px; font-size: 12.5px; }
.lc-order div { display: flex; flex-direction: column; min-width: 0; }
.lc-order span { color: var(--lc-muted); font-size: 11.5px; }
.lc-order b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Page Messages en UN seul écran (demande du fondateur, 2026-10-09) : d'abord la liste seule, en pleine largeur ; un
   clic ouvre la conversation à sa place, la flèche ← ramène à la liste (comme WhatsApp sur téléphone). */
.lc-vpage { grid-template-columns: minmax(0, 1fr); }
.lc-vpage .lc-vcol-list { border-right: none; }
/* Conversation en PANNEAU À DROITE (fondateur, 2026-10-13) : comme le détail d'une vente (Ventes), mais DANS le cadre
   des messages, à la même hauteur que lui ; la liste reste à sa place et se resserre. Plein écran sur téléphone. */
.lc-vpage { position: relative; }
.lc-vpanel { position: absolute; top: 0; right: 0; bottom: 0; width: 420px; background: #fff; border-left: 1px solid #CFCDC3; z-index: 5; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s ease; overflow: hidden; }
.lc-vpanel * { box-sizing: border-box; }
body.lc-panel-open .lc-vpanel { transform: none; visibility: visible; }
.lc-vpage .lc-vcol-list { transition: margin-right .25s ease; }
body.lc-panel-open .lc-vpage .lc-vcol-list { margin-right: 420px; }
.lc-close-d { display: none; }
@media (min-width: 768px) { .lc-close-d { display: inline-flex; } .lc-vpanel .lc-back-m { display: none; } }
@media (min-width: 900px) and (max-width: 1279px) {
  .lc-vpanel { width: 380px; }
  body.lc-panel-open .lc-vpage .lc-vcol-list { margin-right: 380px; }
}
@media (max-width: 899px) {
  .lc-vpanel { position: fixed; top: 0; bottom: auto; width: 100%; height: 100vh; height: 100dvh; border-left: none; z-index: 140; }
  body.lc-panel-open .lc-vpage .lc-vcol-list { margin-right: 0; }
}
@media (max-width: 767px) {
  .lc-vpage { display: block; height: auto; min-height: 0; border: none; border-radius: 0; background: none; overflow: visible; margin: 0 -16px; }
  .lc-vcol-list { border-right: none; }
  .lc-vcol-tools { border-bottom: none; padding: 0 16px 8px; }
  .lc-vcol-list .lc-scroll { overflow: visible; padding: 0 6px 16px; }
  .lc-back-m { display: inline-flex; }
  .lc-order { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 0 16px 10px; }
  .lc-order-toggle { padding: 0 16px; }
  body.lc-conv-open .mnav-bar { display: none !important; }
  body.lc-conv-open { overflow: hidden; }
}

/* ==================================================================================================================
   PALETTE GEMINI (validée par le fondateur le 2026-10-09, « tout appliquer ») — structure Lansiow (noir, doré
   #D4A373), fil de discussion façon WhatsApp (fond #EFEAE2, bulles envoyées vert menthe). Exception assumée, pour
   le chat seulement, aux règles « bouton doré » et « jamais de noir » du reste du SaaS. Bloc d'écrasement : le
   supprimer rend l'ancienne palette.
   ================================================================================================================== */
.lc-scope, .lc-root, .lc-vpage, .lc-fab, .lc-quick {
  --lc-gold: #D4A373; --lc-black: #1A1A1A; --lc-panel: #F8F9FA;
  --lc-wall: #EFEAE2; --lc-mine: #D2ECC1; --lc-theirs: #FFFFFF; --lc-read: #38BDF8;
}
.lc-panel, .lc-quick, .lc-vpage { background: var(--lc-panel); }
/* En-tête noir, texte blanc */
.lc-head { background: var(--lc-black); color: #fff; border-bottom-color: var(--lc-black); }
.lc-head .lc-head-title, .lc-head .lc-h-small { color: #fff; }
.lc-head .lc-head-sub { color: rgba(255, 255, 255, 0.72); }
.lc-head .lc-icon-btn { background: transparent; color: #fff; }
.lc-head .lc-icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.lc-head.is-reported { border-bottom: 2px solid #DC2626; }
.lc-head.is-waiting .lc-head-sub { color: var(--lc-gold); }
.lc-head .lc-thumb { background-color: #2A2A2A; color: rgba(255, 255, 255, 0.7); }
.lc-avatar { background: #FFEAD2; color: #A16207; }
/* Bandeau commande */
.lc-order-wrap { background: #F1F5F9; border-left: 3px solid var(--lc-gold); }
.lc-order-toggle, .lc-order b { color: #334155; }
/* Liste */
.lc-row { background: #fff; }
.lc-row:hover { background: #F1F5F9; }
.lc-row.active { background: #E2E8F0; box-shadow: inset 4px 0 0 var(--lc-gold); }
.lc-row.unread .lc-row-ex span:first-child { color: #0F172A; }
.lc-row.unread .lc-row-time { color: #DC2626; }
.lc-badge { background: #DC2626; color: #fff; }
.lc-chip { background: #E2E8F0; border-color: transparent; color: #475569; }
.lc-chip[aria-pressed="true"] { background: var(--lc-black); border-color: var(--lc-black); color: #fff; }
.lc-search { background: #F1F5F9; border-color: #CBD5E1; }
.lc-search:focus { background: #fff; border-color: var(--lc-gold); box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.18); }
.lc-quick-all { color: #A16207; }
/* Fil */
.lc-day, .lc-sys { background: rgba(255, 255, 255, 0.8); color: #64748B; }
.lc-msg .lc-bubble { color: #1E293B; }
.lc-msg.theirs .lc-bubble { box-shadow: 0 0 0 1px #E9ECEF, 0 1px 0.5px rgba(20, 25, 46, 0.13); }
.lc-msg.theirs .lc-stamp { color: #94A3B8; }
.lc-msg.mine .lc-stamp { color: #64748B; }
.lc-ticks { color: #94A3B8; }
.lc-ticks.read { color: var(--lc-read); }
.lc-note { background: #fff; border-left: 4px solid var(--lc-gold); }
.lc-note-head { color: #A16207; }
.lc-note-body { font-style: italic; color: #334155; }
/* Note vue par le VENDEUR : intro, citation de ce que Lansiow a dit au client, appel à répondre. */
.lc-note-intro { font-size: 13.5px; line-height: 1.5; color: #334155; }
.lc-note-quote { margin: 6px 0 8px; padding: 6px 0 6px 10px; border-left: 2px solid #E2E8F0; font-size: 13.5px; line-height: 1.5; font-style: italic; color: #64748B; white-space: pre-wrap; overflow-wrap: anywhere; }
.lc-note-call { font-size: 13.5px; line-height: 1.5; font-weight: 700; color: #991B1B; }
.lc-note-call.done { font-weight: 600; color: #15803D; }
.lc-note-call-btn { cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lc-note-call-btn:hover { color: #7F1D1D; }
.lc-note-call-btn:focus-visible { outline: 2px solid #E5B000; outline-offset: 2px; border-radius: 4px; }
.lc-dot { background: var(--lc-gold); }
.lc-qr { background: #fff; border: 1.5px dashed var(--lc-gold); color: var(--lc-gold); }
.lc-qr:hover { background: var(--lc-gold); border-color: var(--lc-gold); color: #fff; }
/* Saisie */
.lc-input { background: #fff; border-color: #E2E8F0; }
.lc-input:focus { background: #fff; border-color: var(--lc-gold); box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.2); }
/* Bouton Envoyer : jamais de fond noir (demande du fondateur, 2026-10-09) — CTA jaune universel, icône foncée. */
.lc-send { border-radius: 50%; background: #F2B400; color: #18181B; }
.lc-send[disabled] { opacity: 1; background: #E2E8F0; color: #94A3B8; cursor: not-allowed; }
/* Champ vide = bouton grisé (sans JavaScript : le champ montre son texte indicatif tant qu'il est vide) */
.lc-compose-row:has(.lc-input:placeholder-shown) .lc-send:not([disabled]) { background: #E2E8F0; color: #94A3B8; }
.lc-foot { color: #94A3B8; }
.lc-report-link, .lc-report-done { color: #DC2626; }
.lc-report-link:hover { text-decoration: underline; }
/* Blocages (20 messages, 3 d'affilée) */
.lc-box { background: #FEF2F2; border-top: 1px solid #FCA5A5; color: #991B1B; }
.lc-box b { color: #991B1B; }
.lc-box .lc-report-link { color: #991B1B; }
/* Boutons de signalement */
.lc-btn-report { background: #DC2626; color: #fff; }
.lc-btn-report.armed, .lc-btn-report[disabled] { background: #991B1B; opacity: 1; }
.lc-btn-report.lc-btn-back { background: var(--lc-black); color: #fff; }
.lc-radio:has(input:checked) { border-color: var(--lc-gold); background: #FBF3EA; }
.lc-radio input { accent-color: var(--lc-gold); }
/* Étiquettes : trois sens */
.lc-tag.ok { background: #DCFCE7; color: #15803D; }
.lc-tag.wait { background: #FEF9C3; color: #A16207; }
.lc-tag.bad { background: #FEF2F2; color: #991B1B; }
/* Bouton flottant du vendeur = MÊME bouton que celui de l'acheteur (commande.html .chat-fab, demande du fondateur, 2026-10-09) :
   CTA jaune universel, icône foncée avec les trois points. */
.lc-fab { background: #F2B400; color: #18181B; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: transform .15s ease; }
.lc-fab:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .lc-fab { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .lc-root, .lc-panel, .lc-quick { transition: none !important; }
  .lc-dot, .lc-typing { animation: none !important; }
  .lc-dot { opacity: .7; }
}

/* Connexion refusée par le serveur : message + bouton « Me reconnecter » à la place de la liste (2026-10-09). */
.lc-auth-lost { margin: 12px 8px; display: flex; flex-direction: column; gap: 4px; }
.lc-auth-lost .lc-btn-report { margin-top: 10px; }

/* « En train d'écrire… » dans la liste des conversations (remplace l'état tant que l'autre écrit), 2026-10-09. */
.lc-row-typing { display: none; align-items: center; gap: 2px; flex: 1; min-width: 0; font-size: 13px; font-weight: 600; font-style: italic; color: #DC2626; }  /* rouge (fondateur, 2026-10-09) */
.lc-row.is-typing .lc-row-typing { display: inline-flex; }
.lc-row.is-typing .lc-row-state { display: none; }
.lc-mini-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-left: 2px; animation: lc-dot 1.2s infinite ease-in-out; }
.lc-mini-dot:nth-of-type(2) { animation-delay: .15s; }
.lc-mini-dot:nth-of-type(3) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .lc-mini-dot { animation: none; } }
/* Mise en page de la ligne d'état : l'état (ou « En train d'écrire… ») prend la place restante, les petits points
   gardent leur taille (l'ancienne règle « premier span = flex:1 » ne doit pas les étirer). */
.lc-row-ex > .lc-row-state, .lc-row-ex > .lc-row-typing { flex: 1 1 auto; min-width: 0; }
.lc-row-ex .lc-mini-dot { flex: 0 0 4px; width: 4px; min-width: 0; height: 4px; }

/* ---------- Prospect : première prise de contact depuis la boutique (2026-10-13) ---------- */
.lc-start { background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 1px 3px rgba(20, 25, 46, 0.08); }
.lc-start .lc-p { margin-bottom: 14px; color: #3F3F46; }
.lc-start-label { display: block; font-size: 13px; font-weight: 600; color: var(--lc-ink); margin-bottom: 6px; }
.lc-start-email { width: 100%; min-height: 48px; border: 1px solid var(--field-border, #CFCDC3); border-radius: 10px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--lc-ink); background: #fff; }
.lc-start-email:focus { outline: none; border-color: var(--lc-yellow); background: #fff8e6; box-shadow: 0 0 0 3px rgba(242, 180, 0, 0.2); }
.lc-start-hint { font-size: 12.5px; color: var(--lc-muted); line-height: 1.5; margin: 8px 0 0; }
.lc-box .lc-btn-report.lc-btn-new { background: var(--lc-yellow); color: var(--lc-ink); border-radius: 10px; }

/* Puces de la page Messages en RELIEF (fondateur, 2026-10-14) : même style que les boutons d'options du tableau de bord. */
.lc-vcol-tools .lc-chips { gap: 10px; padding: 2px 0 6px; }
.lc-vcol-tools .lc-chip { min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; background: #fff; color: #1C1B1F; border: 1px solid #CFCDC3; box-shadow: 0 2px 0 #E2DFD6, 0 3px 8px rgba(20, 25, 46, .06); transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
.lc-vcol-tools .lc-chip:hover { border-color: #B8B5AA; background: #FCFBF8; }
.lc-vcol-tools .lc-chip:active { transform: translateY(2px); box-shadow: 0 0 0 #E2DFD6; }
.lc-vcol-tools .lc-chip[aria-pressed="true"] { background: #FFF4D1; border-color: #C99A00; color: #1C1B1F; box-shadow: 0 2px 0 #C99A00, 0 3px 8px rgba(201, 154, 0, .18); }
.lc-vcol-tools .lc-chip:focus-visible { outline: none; box-shadow: 0 2px 0 #C99A00, 0 0 0 3px rgba(242, 183, 5, .3); }
@media (max-width: 480px) { .lc-vcol-tools .lc-chip { padding: 0 14px; font-size: 13.5px; } }

/* SERVICE CLIENT (étape 100, fondateur 2026-10-15) : onglet de la bulle (ordinateur) et écran plein (téléphone). */
.lc-chip-logo { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }
.lc-sup-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lc-sup-intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 8px 16px; }
.lc-sup-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; margin-bottom: 6px; }
.lc-sup-hello { font-size: 15.5px; font-weight: 700; color: var(--lc-ink); }
.lc-sup-sub { font-size: 13.5px; color: var(--lc-muted); }
.lc-sup-msgs { display: flex; flex-direction: column; gap: 6px; }
.lc-sup-from { font-size: 12px; font-weight: 600; color: var(--lc-yellow-ink); margin: 0 0 3px 2px; }
.lc-sup-tag { font-size: 11.5px; font-weight: 600; color: var(--lc-muted); margin: 0 2px 3px; }
.lc-sup-text { white-space: pre-wrap; }
/* Un fil par produit dans le Service client (fondateur, 2026-10-18). */
.lc-sup-fils { padding: 6px 4px; }
.lc-sup-fil-ic { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.lc-sup-fil-ic.team { background: #fff; border: 1px solid var(--lc-line); }
.lc-sup-fil-ic.team img { width: 18px; height: 24px; }
.lc-sup-fil-ic.bad { background: #FDECEC; color: #C53030; }
.lc-sup-fil-ic.ok { background: #E7F6EC; color: #1F7A3E; }
.lc-sup-fil-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--lc-line); flex-shrink: 0; }
.lc-sup-fil-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-sup-askteam { width: 100%; min-height: 44px; border: 1px solid var(--lc-line); border-radius: 10px; background: #fff; color: var(--lc-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lc-sup-askteam:hover { background: var(--lc-bg1); }
.lc-sup-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lc-sup-action { display: inline-block; margin-top: 10px; border: 0; border-radius: 10px; background: var(--gold, #F5B82E); color: var(--ink, #14192E); font: inherit; font-size: 14px; font-weight: 700; padding: 9px 18px; cursor: pointer; }
.lc-sup-time { display: block; margin-top: 4px; font-size: 11px; color: var(--lc-muted); text-align: right; }
.lc-sup-img { display: block; margin-bottom: 4px; }
.lc-sup-img img { display: block; max-width: 220px; max-height: 220px; border-radius: 8px; object-fit: cover; }
.lc-sup-compose { flex-shrink: 0; border-top: 1px solid var(--lc-line); padding: 10px 12px 12px; background: #fff; }
.lc-sup-ask { font-size: 13.5px; font-weight: 600; color: var(--lc-ink); margin: 0 0 8px; }
.lc-sup-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.lc-sup-cat { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 1px solid var(--lc-line); border-radius: 12px; background: #fff; color: var(--lc-ink); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.lc-sup-cat:hover { border-color: #C99A00; }
.lc-sup-cat[aria-pressed="true"] { background: var(--lc-yellow-soft); border-color: #C99A00; }
.lc-sup-cat-ic { font-size: 18px; line-height: 1; }
.lc-sup-row { display: flex; align-items: flex-end; gap: 8px; }
.lc-sup-attach { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lc-line); background: #fff; color: var(--lc-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.lc-sup-attach:hover { border-color: #C99A00; }
.lc-sup-input { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: none; padding: 11px 14px; border: 1px solid var(--field-border, #CFCDC3); border-radius: 22px; font: inherit; font-size: 15px; line-height: 1.4; color: var(--lc-ink); background: #fff; }
.lc-sup-input:focus { outline: none; border-color: #F2B400; background: #fff8e6; box-shadow: 0 0 0 3px rgba(242, 183, 5, .22); }
.lc-sup-preview { position: relative; display: inline-block; margin-bottom: 8px; }
.lc-sup-preview img { display: block; max-width: 140px; max-height: 110px; border-radius: 8px; border: 1px solid var(--lc-line); }
.lc-sup-rm { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: none; background: #18181B; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.lc-sup-err { margin: 0 0 8px; font-size: 13px; color: var(--lc-red); }
.lc-sup-sending { margin-top: 6px; font-size: 12.5px; color: var(--lc-muted); }
.lc-sup-sheet { display: none; }
@media (max-width: 767px) {
  .lc-sup-sheet.open { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 200; background: #fff; }
  .lc-sup-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
  .lc-sup-title img { width: 24px; height: 24px; border-radius: 6px; }
  body.lc-sup-sheet-open { overflow: hidden; }
  .lc-sup-cats { grid-template-columns: 1fr; }
}

/* Bulle de messages (panneau rapide) : lignes de conversation plus compactes (fondateur, 2026-10-16). */
.dash-v2 .lc-quick .lc-list, .lc-quick .lc-list { gap: 6px; }
.lc-quick .lc-row { min-height: 54px; padding: 0 10px; gap: 10px; }
.lc-quick .lc-row-main { padding: 6px 0; }
.lc-quick .lc-row .lc-avatar, .lc-quick .lc-row .lc-thumb { width: 34px; height: 34px; font-size: 12.5px; }
.lc-quick .lc-row-name { font-size: 13.5px; }
.lc-quick .lc-row-time { font-size: 11.5px; }
.lc-quick .lc-row-sub { font-size: 12px; }
.lc-quick .lc-row-ex { margin-top: 1px; gap: 6px; }
.lc-quick .lc-row-ex, .lc-quick .lc-row-state, .lc-quick .lc-row-ex span:first-child { font-size: 12.5px; }
.lc-quick .lc-row-ex .lc-tag { height: 20px; padding: 0 8px; font-size: 11px; }

/* Bulle de messages aux couleurs de la plateforme (fondateur, 2026-10-16) : en-tête clair au lieu du noir, filtres comme la
   page Messages (blanc en relief, filtre choisi doré). */
.lc-quick .lc-head { background: #F6F6F4; color: #1C1B1F; border-bottom-color: #E4E0D7; }
/* Capture du Service client : bouton qui ouvre la visionneuse dans le chat (2026-10-17). */
button.lc-sup-img { display: block; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; font: inherit; }
button.lc-sup-img:focus-visible { outline: 2px solid #f2b705; outline-offset: 2px; border-radius: 8px; }
.lc-sup-wait { margin: 0; font-size: 13.5px; line-height: 1.45; }
/* Contour de la fenêtre de chat (fondateur, 2026-10-17) : même trait que les lignes de Ventes, visible sans être foncé. */
.lc-quick { border: 1px solid var(--field-border, #c2beac); }
.lc-quick .lc-head .lc-head-title, .lc-quick .lc-head .lc-h-small { color: #1C1B1F; }
.lc-quick .lc-head .lc-head-sub { color: #6B665D; }
.lc-quick .lc-head.is-waiting .lc-head-sub { color: #B45309; }
.lc-quick .lc-head .lc-icon-btn { background: transparent; color: #1C1B1F; }
.lc-quick .lc-head .lc-icon-btn:hover { background: rgba(20, 25, 46, .06); }
.lc-quick .lc-head .lc-thumb { background-color: #ECEAE4; color: #6B665D; }
.lc-quick .lc-quick-filters { background: #fff; }
.lc-quick .lc-chips { gap: 8px; padding: 2px 0 6px; }
.lc-quick .lc-chip { min-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600; background: #fff; color: #1C1B1F; border: 1px solid #CFCDC3; box-shadow: 0 2px 0 #E2DFD6, 0 3px 8px rgba(20, 25, 46, .06); transition: transform .08s ease, box-shadow .15s ease, background-color .15s ease; }
.lc-quick .lc-chip:hover { border-color: #B8B5AA; background: #FCFBF8; }
.lc-quick .lc-chip:active { transform: translateY(2px); box-shadow: 0 0 0 #E2DFD6; }
.lc-quick .lc-chip[aria-pressed="true"] { background: #FFF4D1; border-color: #C99A00; color: #1C1B1F; box-shadow: 0 2px 0 #C99A00, 0 3px 8px rgba(201, 154, 0, .18); }
.lc-quick .lc-chip:focus-visible { outline: none; box-shadow: 0 2px 0 #C99A00, 0 0 0 3px rgba(242, 183, 5, .3); }
/* Envoi en cours (fondateur, 2026-10-17, animation Uiverse.io de barisdogansutcu) : cercle qui tourne et se dessine dans le
   bouton d'envoi, à la place des « … ». Limité à .lc-spin pour ne jamais animer d'autres icônes. */
.lc-spin { width: 26px; height: 26px; transform-origin: center; animation: lc-rotate4 2s linear infinite; }
.lc-spin circle { fill: none; stroke: hsl(214, 97%, 59%); stroke-width: 4; stroke-dasharray: 1, 200; stroke-dashoffset: 0; stroke-linecap: round; animation: lc-dash4 1.5s ease-in-out infinite; }
@keyframes lc-rotate4 { 100% { transform: rotate(360deg); } }
@keyframes lc-dash4 { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; } 100% { stroke-dashoffset: -125px; } }
/* Bulle en cours d'envoi (envoi instantané, 2026-10-17) : petite horloge à la place de la coche, jusqu'à la confirmation. */
.lc-pending .lc-ticks { color: #94A3B8; }
.lc-pending .lc-ticks svg { display: block; }
/* Bouton d'envoi (fondateur, 2026-10-18) : la couleur passe en douceur du gris au doré, léger enfoncement au clic.
   Seul le bouton réagit : la flèche reste fixe. */
.lc-send { transition: background-color .2s ease, color .2s ease, transform .1s ease; }
.lc-send:not([disabled]):active { transform: scale(.92); }
/* Service client : bouton gris tant que rien n'est écrit, comme dans les conversations. */
.lc-sup-input:placeholder-shown ~ .lc-sup-send:not([disabled]) { background: #E2E8F0; color: #94A3B8; }
@media (prefers-reduced-motion: reduce) { .lc-send { transition: none; } .lc-send:not([disabled]):active { transform: none; } }
/* Zones de saisie du chat : aucune barre de défilement (ni flèches) tant que le texte tient dans la zone ; elle n'apparaît
   qu'au-delà de la hauteur maximale (classe .lc-scroll posée par autoGrow, 2026-10-18). */
.lc-input, .lc-sup-input { overflow-y: hidden; }
.lc-input.lc-scroll, .lc-sup-input.lc-scroll { overflow-y: auto; }