/* Refonte UX nocturne — poste Commerce (vendeur). Surcharges seulement (c3.css reste la base). */

/* 2.2 : deux onglets, filtres de Contacts sur une ligne */
.ux-com-entete h1 { font-size: 20px; white-space: nowrap; }
.ux-com-onglets button { font-weight: 600; }
.ux-com-filtres { padding: 6px 10px; align-items: center; }
.ux-com-filtres [data-filtre="corbeille"] { margin-left: 6px; border-left: 1px solid hsl(var(--border)); border-radius: 0 8px 8px 0; }
.v2-clients-actions { align-items: center; gap: 8px; }
.v2-clients-actions .ux-com-filtres { padding: 0; }
main > .ux-com-filtres, .ux-com-filtres + .panel { margin-top: 8px; }

/* 2.1 : réponses suggérées en un clic, envoyer et suivant */
.ux-com-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.ux-com-chip { border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.ux-com-chip:hover { border-color: hsl(var(--choisi-cerne)); color: hsl(var(--choisi-texte)); }
.ux-com-chip[data-suggestion^="lien_"] { border-style: dashed; }
.c3-envoyer kbd { margin-left: 8px; font-size: 11px; opacity: .8; background: hsl(0 0% 100% / .18); border-radius: 4px; padding: 1px 4px; }
.c3-envoyer-seul { margin-left: auto; }
.c3-compose-pied .c3-envoyer { margin-left: 0; }
.ux-com-bac { width: 100%; text-align: right; }
.v2-outil-compose .ux-com-type { display: grid; gap: 2px; text-align: left; width: 100%; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); border-radius: 10px; padding: 8px 10px; font: inherit; cursor: pointer; }
.v2-outil-compose .ux-com-type:hover { border-color: hsl(var(--choisi-cerne)); }
.v2-outil-compose .ux-com-suggeree { border-left: 3px solid hsl(var(--primary)); }
.v2-outil-compose { max-height: 40vh; overflow-y: auto; }

/* 2.3 : offre en une page — sections vides repliées */
details.ux-com-repli > summary { list-style: none; cursor: pointer; }
details.ux-com-repli > summary::-webkit-details-marker { display: none; }
details.ux-com-repli > summary h3 { margin: 0; }
details.ux-com-repli > summary h3::after { content: "▸"; color: hsl(var(--muted-foreground)); font-size: 12px; }
details.ux-com-repli[open] > summary h3 { margin-bottom: 8px; }
details.ux-com-repli[open] > summary h3::after { content: "▾"; }
.ux-com-identique { display: block; margin-bottom: 10px; }
.c3-pied .ux-com-identique { display: inline-block; margin: 0; }

/* Téléphone : onglets lisibles, zone de réponse fixée au-dessus de la barre du bas */
@media (max-width: 760px) {
  .ux-com-entete h1 { display: block; font-size: 17px; width: 100%; }
  .ux-com-onglets { overflow: visible; }
  .ux-com-onglets button { flex: 1 1 0; }
  .c3-entete .ux-com-onglets { width: 100%; flex-wrap: nowrap; }
  .c3-entete-gestes .v2-bac-bouton, .c3-entete-gestes [data-geste="nouveau-dossier"] { flex: 1 1 0; }
  /* Zone de réponse fixée en bas (au-dessus de la barre Voiture / Offre / Suivant), compacte. */
  .c3-plan > .c3-conv { overflow: visible; }
  .c3-compose { position: sticky; bottom: calc(50px + env(safe-area-inset-bottom)); scroll-margin-bottom: calc(50px + env(safe-area-inset-bottom)); z-index: 30; box-shadow: 0 -6px 14px hsl(220 30% 20% / .12); grid-template-columns: minmax(0, 1fr); padding: 6px 10px 8px; gap: 5px; }
  .c3-compose > * { min-width: 0; }
  .c3-compose-onglets button { padding: 3px 9px; font-size: 12px; }
  .c3-dest { flex-wrap: nowrap; font-size: 12.5px; }
  .c3-dest > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .c3-par select { max-width: 46vw; padding: 2px 6px; }
  .c3-compose textarea { min-height: 52px; max-height: 18vh; padding: 8px 10px; }
  .c3-etat-ligne { min-height: 0; }
  .c3-messages { max-height: 34vh; scroll-margin-bottom: 285px; }
  .ux-com-suggestions { flex-wrap: nowrap; overflow-x: auto; }
  .ux-com-chip { white-space: nowrap; }
  .c3-compose-pied { flex-wrap: wrap; }
  .c3-compose-pied .btn { padding: 6px 9px; font-size: 12.5px; white-space: nowrap; }
  .c3-compose-pied .c3-envoyer { width: auto; flex: 1 1 auto; margin-left: 0; }
  .c3-compose-pied [data-geste="brouillon-aide"], .c3-compose-pied [data-geste="pieces-jointes"], .ux-com-bac, .c3-envoyer kbd { display: none; }
  .c3-sans-canal { font-size: 12px; white-space: normal; width: 100%; order: -1; }
  .v2-outil-compose { max-height: 32vh; }
}

/* Offre : la carte « Bon de commande » ne déborde plus quand les versions s’accumulent. */
@media (min-width: 761px) {
  .c3-versions { flex-wrap: wrap; overflow-x: visible; }
  .c3-version { min-width: 150px; }
}