/* Discussion (10/11/2026) — style « Plaque » : feuille blanche, fond #F3F4F6, bleu émail ; coins discrets, aucune pastille
   décorative. Téléphone d'abord : le fil défile dans son cadre, la saisie reste dessous (rien ne flotte sur la page). */
.dx-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dx{display:flex;flex-direction:column;min-height:400px;background:var(--feuille);border:1px solid var(--filet);border-radius:4px;overflow:hidden}
.dx button,.dx label.dx-outil{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.dx-entete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;border-bottom:1px solid var(--filet)}
.dx-entete h2{font:400 1.25rem/1.2 var(--titre)}
.dx-entete .petit{margin:2px 0 0;color:var(--gris)}
.dx-outils{display:flex;flex-direction:column;border-bottom:1px solid var(--filet)}
.dx-outils>.dx-recherche{padding:6px 8px}
.dx-outils>.dx-petit,.dx-outils>.dx-erreur{padding:0 12px 6px}
.dx-barre{display:flex;align-items:stretch;min-height:44px}

.dx-outil{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--filet);border-radius:4px;background:var(--feuille);color:var(--encre);font:600 .95rem var(--texte);cursor:pointer;transition:background .12s,transform .08s}
.dx-outil:hover{background:var(--email-clair)}
.dx-outil:active,.dx-envoyer:active,.dx-bouton:active{transform:scale(.97)}
.dx-outil svg{width:20px;height:20px;flex:none}
.dx-outil:focus-within{outline:3px solid var(--email);outline-offset:2px}
.dx-fichier{position:absolute;opacity:0;width:1px;height:1px;inset:0}
.dx-recherche{display:flex;gap:6px}
.dx-recherche input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--bord);border-radius:4px;font:inherit;background:var(--feuille);color:var(--encre)}
.dx-resultats{list-style:none;margin:0;padding:0;max-height:40vh;overflow:auto}
.dx-resultats button,.dx-epingles-liste button{display:block;width:100%;text-align:left;min-height:44px;padding:8px 6px;border:0;border-bottom:1px solid var(--filet);background:none;color:var(--encre);font:400 .97rem/1.35 var(--texte);cursor:pointer}
.dx-resultats button:hover,.dx-epingles-liste button:hover{background:var(--fond)}
.dx-quand{display:block;font-size:.8rem;color:var(--gris)}
.dx-epingles-tete{flex:1;min-width:0;background:var(--email-clair)!important;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;border:0;background:none;color:var(--encre);font:400 .95rem/1.3 var(--texte);text-align:left;cursor:pointer}
.dx-epingles-tete svg{width:18px;height:18px;flex:none;color:var(--email)}
.dx-epingles-tete span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-epingles-liste{list-style:none;margin:0;padding:0 10px 6px;background:var(--email-clair)}
.dx-cadre{position:relative;flex:1;min-height:240px}
.dx-fil{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 16px;scroll-behavior:auto}
.dx-fil:focus-visible{outline:3px solid var(--email);outline-offset:-3px}
.dx-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dx-haut{text-align:center;padding:2px 0 8px}
.dx-jour{text-align:center;margin:10px 0 4px}
.dx-jour span{font:500 .92rem/1 var(--plaque);letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.dx-m{display:flex;flex-direction:column;max-width:86%}
.dx-moi{align-self:flex-end;align-items:flex-end}
.dx-eux{align-self:flex-start;align-items:flex-start}
.dx-info{align-self:center;max-width:92%;text-align:center;font-size:.88rem;color:var(--gris)}
.dx-info p{margin:4px 0}
.dx-bulle{padding:9px 12px;border-radius:6px;background:var(--fond);color:var(--encre);font-size:1rem;line-height:1.45;overflow-wrap:anywhere}
.dx-moi .dx-bulle{background:var(--email);color:#fff}
.dx-moi .dx-bulle a{color:#fff}
.dx-texte{margin:0}
.dx-texte+.dx-texte,.dx-photo+.dx-texte,.dx-video+.dx-texte,.dx-doc+.dx-texte,.dx-vocal+.dx-texte{margin-top:6px}
.dx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:.8rem;color:var(--gris);margin-top:1px}
.dx-moi .dx-meta{justify-content:flex-end}
.dx-statut{font-weight:600;color:var(--email)}
.dx-marque svg{width:14px;height:14px;color:var(--email)}
.dx-plus{display:inline-grid;place-items:center;width:44px;height:44px;margin:-10px -8px -10px -4px;border:0;background:none;color:var(--gris);cursor:pointer;border-radius:4px}
.dx-plus svg{width:20px;height:20px}
.dx-plus:hover,.dx-plus[aria-expanded="true"]{color:var(--encre);background:var(--fond)}
.dx-actions{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.dx-bouton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:4px;border:1px solid var(--bord);background:var(--feuille);color:var(--encre);font:600 .93rem var(--texte);cursor:pointer;transition:background .12s,transform .08s}
.dx-bouton:hover{background:var(--email-clair)}
.dx-plein{background:var(--email);border-color:var(--email);color:#fff}
.dx-plein:hover{background:var(--email-fonce)}
.dx-discret{border-color:var(--filet)}
.dx-bouton.charge,.dx-outil.charge{opacity:.6;pointer-events:none}
.dx-photo{display:block}
.dx-photo img{display:block;max-width:min(260px,100%);max-height:320px;border-radius:4px;background:#E5E7EB;object-fit:cover}
.dx-video{display:block;max-width:min(300px,100%);max-height:360px;border-radius:4px;background:#000}
.dx-vocal{display:flex;align-items:center;gap:8px}
.dx-vocal audio{width:min(220px,56vw);height:40px}
.dx-doc{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border:1px solid var(--filet);border-radius:4px;background:var(--feuille);color:var(--encre)!important;text-decoration:none}
.dx-doc svg{width:24px;height:24px;flex:none;color:var(--email)}
.dx-doc strong{display:block;overflow-wrap:anywhere}
.dx-lien{display:block;min-height:44px;margin-top:6px;padding:2px 0 2px 10px;border-left:3px solid currentColor;color:inherit!important;text-decoration:none}
.dx-lien strong{display:block;font-weight:600}
.dx-domaine{display:block;font-size:.82rem;opacity:.85}
.dx-demande{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0;padding-top:6px;border-top:1px dotted currentColor;font-size:.92rem}
.dx-demande[data-statut="faite"] strong::after{content:" ✓"}
.dx-demande-boutons{display:flex;gap:6px}
.dx-demande .dx-bouton{min-height:36px;color:var(--encre)}
.dx-petit{font-size:.85rem;color:var(--gris);margin:0}
.dx-erreur{color:var(--rouge);font-weight:600}
.dx-moi .dx-bulle .dx-erreur{color:#fff}
.dx-etat{align-self:center;text-align:center;padding:24px 8px}
.dx-vide p{max-width:34ch;margin:0 auto;color:var(--gris)}
.dx-squelette{max-width:70%}
.dx-squelette span{display:block;width:220px;max-width:100%;height:40px;border-radius:6px;background:#E5E7EB;animation:dx-pouls 1.2s ease-in-out infinite}
.dx-squelette span.court{width:140px}
.dx-squelette.dx-moi span{background:#D6DEEE}
@keyframes dx-pouls{50%{opacity:.55}}
.dx-surligne .dx-bulle{outline:3px solid var(--email-pale);outline-offset:2px}
.dx-attente .dx-bulle{opacity:.8}
.dx-progres{height:6px;margin-top:8px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden;min-width:160px}
.dx-progres span{display:block;height:100%;background:#fff;transition:width .2s}
.dx-indetermine{width:35%;animation:dx-va 1.1s ease-in-out infinite}
@keyframes dx-va{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.dx-nouveaux{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:0;border-radius:4px;background:var(--encre);color:#fff;font:600 .93rem var(--texte);cursor:pointer}
.dx-nouveaux svg{width:18px;height:18px}
.dx-avant:empty{display:none}
.dx-avant{padding:8px 8px 0;border-top:1px solid var(--filet)}
.dx-avant .reponses-rapides{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0;padding-bottom:4px}
.dx-avant .reponses-rapides .mini-bouton{flex:none}
/* Elles défilent : un fondu à droite tant qu'on n'est pas au bout (le dernier bouton se voit à moitié) */
.dx-avant .reponses-rapides.dx-deborde:not(.dx-au-bout){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.dx-saisie{display:grid;gap:8px;padding:8px;border-top:1px solid var(--filet);background:var(--feuille)}
.dx-avant+.dx-saisie{border-top:0}
.dx-saisie textarea{width:100%;min-height:44px;max-height:160px;resize:none;padding:10px 12px;border:1px solid var(--bord);border-radius:4px;background:var(--feuille);color:var(--encre);font:400 1rem/1.4 var(--texte)}
.dx-saisie textarea:focus{outline:3px solid var(--email);outline-offset:0;border-color:var(--email)}
.dx-boutons{display:flex;align-items:center;gap:6px}
.dx-envoyer{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:4px;background:var(--email);color:#fff;font:600 1rem var(--texte);cursor:pointer;transition:background .12s,transform .08s}
.dx-envoyer:hover{background:var(--email-fonce)}
.dx-envoyer svg{width:20px;height:20px}
.dx-enregistre{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dx-enregistre [role=timer]{flex:1;font:500 1.05rem/1 var(--plaque);letter-spacing:.02em}
.dx-rec{width:12px;height:12px;border-radius:2px;background:var(--rouge);animation:dx-pouls 1s ease-in-out infinite}
@media (min-width:700px){.dx-m{max-width:72%}.dx-fil{padding:16px 20px}}
@media (prefers-reduced-motion:reduce){.dx-squelette span,.dx-rec,.dx-indetermine{animation:none}}

/* Espace du commerçant : le titre court au-dessus du fil */
.dx-page .dx-tete{margin-bottom:12px}
.dx-page .dx-tete p{margin:0}

/* Écran d'Ethan : la liste et le fil (côte à côte à partir de 1 100 px) */
.dxa-grille{display:grid;gap:16px;align-items:start}
.dxa-colonne-fil{padding:0;overflow:hidden}
.dxa-colonne-fil .dx{border:0;border-radius:0}
.dxa-rien{display:none}
.dxa-retour{display:inline-flex}
.dxa-ouverte .dxa-colonne-liste,.dxa-ouverte .dxa-tete-liste{display:none}
@media (min-width:1100px){
  .dxa-grille{grid-template-columns:minmax(300px,380px) 1fr}
  .dxa-rien{display:grid;place-items:center;min-height:300px}
  .dxa-ouverte .dxa-colonne-liste,.dxa-ouverte .dxa-tete-liste{display:block}
  .dxa-retour{display:none}
  .dxa-colonne-liste{position:sticky;top:12px;max-height:calc(100vh - 100px);overflow:auto}
}
.dxa-liste{list-style:none;margin:0;padding:0}
.dxa-liste a{display:grid;gap:2px;padding:12px 10px;border-bottom:1px solid var(--filet);color:var(--encre);text-decoration:none;min-height:44px}
.dxa-liste a:hover{background:var(--fond)}
.dxa-liste a[aria-current="true"]{background:var(--email-clair);box-shadow:inset 3px 0 0 var(--email)}
.dxa-haut,.dxa-bas{display:flex;align-items:baseline;gap:8px;min-width:0}
.dxa-haut strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dxa-attend strong{font-weight:700}
.dxa-quand{margin-left:auto;flex:none;font:500 .9rem/1 var(--plaque);color:var(--gris)}
.dxa-extrait{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gris);font-size:.95rem}
.dxa-attend .dxa-extrait{color:var(--encre)}
.dxa-n{flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:3px;background:var(--email);color:#fff;font:600 .85rem/22px var(--plaque);text-align:center}
.dxa-marque{flex:none;font:600 .8rem/1 var(--plaque);letter-spacing:.06em;text-transform:uppercase;color:var(--email)}
.dxa-gris{color:var(--gris)}
.dxa-brouillon{font-size:.85rem;font-weight:600;color:var(--email)}
.dxa-brouillon.dxa-gris{font-weight:400}
.dxa-qui h2{display:flex;align-items:baseline;gap:10px}
.dxa-qui-boutons{display:flex;gap:6px}
.dxa-brouillon-bloc{margin:0 0 8px;padding:8px 10px;max-height:34vh;overflow:auto;border:1px dashed var(--email);border-radius:4px;background:var(--email-clair)}
.dxa-brouillon-bloc h3{font:600 .8rem/1 var(--plaque);letter-spacing:.06em;text-transform:uppercase;color:var(--email);margin-bottom:6px}
.dxa-brouillon-bloc p{margin:0 0 6px}
.dxa-brouillon-bloc .boutons{display:flex;flex-wrap:wrap;gap:6px}

/* Téléphone : en-tête du fil et brouillon compacts (le fil garde la place) */
@media (max-width:699px){
  .dx-entete{padding:8px 12px}
  .dx-entete h2{font-size:1.1rem}
  .dx-entete .petit{display:none}
  .dx-entete .mini-bouton{min-height:40px}
  .dxa-brouillon-bloc p{font-size:.95rem}
  .dxa-brouillon-bloc .petit{display:none}
  .dxa-colonne-fil{margin:0 -16px;border-left:0;border-right:0}
}
.dx-moi .dx-bulle .dx-petit{color:#fff}
.dx-vocal .dx-petit{white-space:nowrap}
.dx-moi .dx-bulle:has(> .dx-photo,> .dx-video):not(:has(.dx-texte)){padding:4px;background:var(--email-clair)}
.dx-moi .dx-bulle .dx-doc .dx-petit{color:var(--gris)}