/* Messagerie DjassaGo — partagé par la boutique, le tableau de bord et l'espace livreur */
[hidden] { display: none !important; }
.page-discussion { display: flex; flex-direction: column; height: calc(100dvh - var(--haut-entete, 0px) - var(--bas, 0px)); min-height: 420px; background: #fff; }
.disc-tete { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--ligne, #e3e9e6); min-height: 60px; }
.disc-tete .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--vert); color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; object-fit: cover; }
.disc-tete .avatar .ico { width: 22px; height: 22px; }
.disc-tete .qui { flex: 1; min-width: 0; line-height: 1.25; }
.disc-tete .qui strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
.disc-tete .qui small { color: var(--gris, #5f6b65); font-size: .8rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-tete .qui small.ecrit { color: #1fae5b; font-weight: 700; }
.disc-tete .actions { display: flex; gap: 4px; align-items: center; }
.disc-tete form { margin: 0; }
.btn-rond { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: transparent; color: var(--vert); text-decoration: none; }
.btn-rond:hover { background: var(--vert-clair, #e7f2ec); }
.btn-rond.appel { background: var(--vert); color: #fff; }
.btn-rond .ico { width: 21px; height: 21px; }

/* Fil des messages */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; background: #efeae2;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 18px 18px; }
.chat-fil { flex: 1; overflow-y: auto; padding: 12px 10px 8px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.chat-vide, .chat-chargement { margin: auto; text-align: center; color: var(--gris, #5f6b65); font-size: .9rem; line-height: 1.5; background: rgba(255,255,255,.85); padding: 12px 16px; border-radius: 12px; max-width: 300px; }
.jour { align-self: center; background: rgba(255,255,255,.92); color: var(--gris, #5f6b65); font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 8px; margin: 8px 0 4px; box-shadow: 0 1px 1px rgba(0,0,0,.06); position: sticky; top: 4px; z-index: 1; }
.bulle { position: relative; max-width: min(80%, 540px); padding: 6px 8px 4px; border-radius: 10px; background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.08); word-wrap: break-word; overflow-wrap: anywhere; margin-top: 2px; transition: transform .15s; }
.bulle.autre { align-self: flex-start; border-top-left-radius: 3px; }
.bulle.moi { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 3px; }
.bulle.livreur.autre { background: #eef3ff; }
.bulle.eclair { animation: eclair 1.4s; }
@keyframes eclair { 0%, 60% { box-shadow: 0 0 0 3px var(--or, #f5a524); } }
.bulle .auteur { display: block; font-size: .76rem; font-weight: 800; margin-bottom: 2px; }
.bulle p { margin: 0; font-size: .95rem; line-height: 1.38; padding: 0 2px; }
.bulle p a { color: #027eb5; text-decoration: underline; }
.bulle p.supprime { color: #6b7570; font-style: italic; display: flex; gap: 6px; align-items: center; }
.bulle p.supprime .ico { width: 15px; height: 15px; }
.pied-bulle { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: .68rem; color: #667781; margin-top: 2px; padding-left: 14px; white-space: nowrap; }
.statut { display: inline-flex; font-style: normal; color: #8696a0; }
.statut b { font-weight: 800; font-size: .78rem; letter-spacing: -.42em; margin-right: .4em; }
.statut.lu { color: #53bdeb; }
.statut .ico { width: 13px; height: 13px; }
.statut.echec { color: #d93025; }
.ouvrir-menu { position: absolute; top: 2px; right: 2px; width: 26px; height: 22px; border: 0; border-radius: 6px; background: inherit; color: #8696a0; cursor: pointer; opacity: 0; display: grid; place-items: center; }
.ouvrir-menu .ico { width: 18px; height: 18px; }
.bulle:hover .ouvrir-menu { opacity: 1; }
@media (hover: none) { .ouvrir-menu { display: none; } }
.bulle-systeme { align-self: center; background: #fff7d6; color: #6b5300; font-size: .76rem; font-weight: 600; padding: 4px 12px; border-radius: 8px; margin: 4px 0; text-align: center; }

/* Citation (réponse) */
.citation { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; background: rgba(0,0,0,.05); border-left: 4px solid var(--vert); border-radius: 6px; padding: 5px 8px; margin-bottom: 4px; cursor: pointer; font-size: .82rem; }
.citation b { color: var(--vert); grid-column: 1; }
.citation span { color: #54656f; grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.citation img { grid-column: 2; grid-row: 1 / 3; width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }

/* Médias */
.bulle.t-image, .bulle.t-video { padding: 3px 3px 4px; }
.bulle.t-image p, .bulle.t-video p { padding: 4px 6px 0; }
.media { display: block; position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 8px; overflow: hidden; background: #cfd8d3; width: min(280px, 68vw); max-height: 360px; aspect-ratio: 4 / 3; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media .lecture { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; }
.media .lecture .ico { width: 26px; height: 26px; fill: #fff; }
.media .video-vide { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: #26312c; }
.media .video-vide .ico { width: 40px; height: 40px; opacity: .6; }
.duree-media { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: .75rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.audio { display: flex; align-items: center; gap: 6px; padding: 2px; }
.audio .ico { width: 20px; height: 20px; color: var(--vert); flex-shrink: 0; }
.audio.vocal .ico { color: #1fae5b; }
.audio audio { width: min(250px, 58vw); height: 40px; }
.nom-audio { display: block; font-size: .78rem; color: #54656f; padding: 0 4px; }
.document, .position { display: flex; align-items: center; gap: 10px; padding: 8px; background: rgba(0,0,0,.05); border-radius: 8px; color: inherit; text-decoration: none; min-width: 210px; }
.document .ico, .position .ico { width: 32px; height: 32px; color: #e4572e; flex-shrink: 0; }
.position .carte-pos { width: 48px; height: 48px; border-radius: 8px; background: #dff2e6; display: grid; place-items: center; }
.position .ico { color: #1a7f4b; width: 26px; height: 26px; }
.document b, .position b { display: block; font-size: .9rem; word-break: break-all; }
.document small, .position small { color: #667781; font-size: .76rem; }
.fiche-article { display: flex; gap: 10px; background: #fff; border-radius: 8px; padding: 8px; border: 1px solid #e3e9e6; min-width: 230px; }
.fiche-article img, .fiche-article .fa-ico { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--vert-clair, #e7f2ec); color: var(--vert); display: grid; place-items: center; flex-shrink: 0; }
.fiche-article b { display: block; }
.fiche-article small { color: #667781; display: block; }
.fa-prix { color: var(--vert); font-weight: 800; }
.fa-prix s { color: #8696a0; font-weight: 500; font-size: .85em; }
.fiche-article em { color: #c0392b; font-size: .8rem; display: block; }
.btn-panier { display: flex; width: 100%; justify-content: center; align-items: center; gap: 6px; margin-top: 6px; padding: 9px; border: 0; border-radius: 8px; background: var(--vert); color: #fff; font-weight: 800; cursor: pointer; }
.btn-panier .ico { width: 17px; height: 17px; }
.voir-article { display: block; text-align: center; font-size: .8rem; font-weight: 700; color: var(--vert); padding: 6px 0 0; }
.progression { height: 4px; background: rgba(0,0,0,.1); border-radius: 2px; margin: 4px 2px 0; overflow: hidden; }
.progression span { display: block; height: 100%; background: var(--vert); transition: width .2s; }
.echec-envoi { font-size: .78rem; color: #b42318; padding: 4px 2px 0; }
.echec-envoi button { border: 0; background: none; color: var(--vert); font-weight: 800; cursor: pointer; padding: 2px 4px; }

/* Barre de saisie */
.barre-reponse { display: flex; align-items: center; gap: 8px; margin: 0 10px; padding: 8px 10px; background: #fff; border-left: 4px solid var(--vert); border-radius: 10px 10px 0 0; box-shadow: 0 -1px 4px rgba(0,0,0,.06); }
.br-corps { flex: 1; min-width: 0; font-size: .85rem; }
.br-corps b { display: block; color: var(--vert); }
.br-corps span { display: block; color: #54656f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#br-mini { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; }
.br-fermer { border: 0; background: none; color: #667781; cursor: pointer; padding: 4px; }
.br-fermer .ico { width: 20px; height: 20px; }
.chat-saisie, .chat-vocal { display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: #f0f2f5; }
.chat-saisie textarea { flex: 1; resize: none; border: 0; border-radius: 22px; padding: 11px 15px; font: inherit; font-size: 1rem; max-height: 140px; background: #fff; outline: none; line-height: 1.35; min-width: 0; }
.chat-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--vert); color: #fff; flex-shrink: 0; }
.chat-btn .ico { width: 21px; height: 21px; }
.chat-btn.clair { background: transparent; color: #54656f; width: 40px; }
.chat-btn.clair .ico { width: 23px; height: 23px; transform: rotate(-45deg); }
.chat-btn.annuler { background: #fff; color: #c0392b; }
.chat-vocal { align-items: center; }
.chat-vocal .enreg { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 22px; padding: 12px 16px; font-weight: 600; color: #54656f; }
.chat-vocal .enreg i { width: 10px; height: 10px; border-radius: 50%; background: #e0245e; animation: clignote 1s infinite; }
.chat-vocal .enreg b { color: #111b21; font-variant-numeric: tabular-nums; }
@keyframes clignote { 50% { opacity: .2; } }

/* Feuille des pièces jointes */
.feuille-pj { position: absolute; left: 8px; bottom: 66px; z-index: 6; background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: 14px 10px; display: grid; grid-template-columns: repeat(4, 76px); gap: 10px 4px; }
.feuille-pj button { border: 0; background: none; display: grid; justify-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: #3b4a54; cursor: pointer; padding: 0; }
.pj-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.pj-ico .ico { width: 24px; height: 24px; }
.pj-ico.galerie { background: #bf59cf; } .pj-ico.photo { background: #ff2e74; } .pj-ico.video { background: #e4572e; }
.pj-ico.doc { background: #5157ae; } .pj-ico.audio { background: #f96533; } .pj-ico.position { background: #1fa855; }
.pj-ico.article { background: var(--vert); } .pj-ico.rapides { background: #d3a10e; }
@media (max-width: 380px) { .feuille-pj { grid-template-columns: repeat(3, 80px); } }

.aller-bas { position: absolute; right: 12px; bottom: 76px; z-index: 4; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: #54656f; box-shadow: 0 2px 8px rgba(0,0,0,.2); display: grid; place-items: center; cursor: pointer; }
.aller-bas .ico { width: 22px; height: 22px; }
.aller-bas b { position: absolute; top: -6px; right: -4px; background: #1fae5b; color: #fff; font-size: .68rem; min-width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; padding: 0 5px; }
.toast-discussion { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); background: rgba(17,27,33,.92); color: #fff; padding: 9px 14px; border-radius: 10px; font-size: .86rem; z-index: 8; max-width: 90%; text-align: center; }
.hors-ligne { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; background: #fff4d6; color: #7a5800; font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; display: flex; gap: 6px; align-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.1); width: max-content; max-width: 92%; }
.hors-ligne .ico { width: 16px; height: 16px; }
.depot { position: absolute; inset: 0; z-index: 9; background: rgba(15,81,50,.85); color: #fff; display: grid; place-content: center; justify-items: center; gap: 10px; font-size: 1.1rem; border: 3px dashed #fff; border-radius: 12px; margin: 8px; }
.depot .ico { width: 48px; height: 48px; }

/* Plein écran : aperçu avant envoi, visionneuse */
.plein-ecran { position: fixed; inset: 0; z-index: 120; background: #0b141a; color: #fff; display: flex; flex-direction: column; }
.pe-tete { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-weight: 700; }
.pe-tete span { flex: 1; }
.pe-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pe-btn .ico { width: 22px; height: 22px; }
.pe-btn.sombre { background: #f0f2f5; color: #3b4a54; }
.pe-corps { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.pe-corps img, .pe-corps video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.apercu-vignettes { display: flex; gap: 6px; padding: 6px 12px; overflow-x: auto; }
.apercu-vignettes button { width: 54px; height: 54px; border-radius: 6px; border: 2px solid transparent; padding: 0; overflow: hidden; background: #26312c; color: #fff; flex-shrink: 0; cursor: pointer; display: grid; place-items: center; }
.apercu-vignettes button.actif { border-color: #1fae5b; }
.apercu-vignettes img { width: 100%; height: 100%; object-fit: cover; }
.apercu-saisie { display: flex; gap: 8px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
.apercu-saisie input { flex: 1; border: 0; border-radius: 22px; padding: 12px 16px; font: inherit; background: #2a3942; color: #fff; outline: none; }
.apercu-saisie .chat-btn { background: #1fae5b; }

/* Menu d'un message et feuilles */
.voile-menu { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.25); }
.menu-message { position: fixed; z-index: 111; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 6px; min-width: 210px; display: grid; }
.menu-message button { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 11px 12px; font: inherit; font-size: .95rem; border-radius: 8px; cursor: pointer; text-align: left; color: #111b21; }
.menu-message button:hover { background: #f0f2f5; }
.menu-message button .ico { width: 19px; height: 19px; color: #54656f; }
.menu-message button.danger, .menu-message button.danger .ico { color: #d93025; }
.feuille { position: fixed; z-index: 111; left: 0; right: 0; bottom: 0; max-height: 75dvh; background: #fff; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; box-shadow: 0 -8px 30px rgba(0,0,0,.2); max-width: 560px; margin: 0 auto; }
.feuille-tete { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid #eef1f0; }
.champ-feuille { margin: 10px 14px 4px; border: 1px solid #d3dbd7; border-radius: 10px; padding: 10px 12px; font: inherit; width: auto; }
.feuille-liste { overflow-y: auto; padding: 6px 8px 14px; display: grid; gap: 2px; }
.feuille-liste button { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 9px 8px; border-radius: 10px; cursor: pointer; font: inherit; color: #111b21; }
.feuille-liste button:hover { background: #f0f2f5; }
.feuille-liste img, .feuille-liste .fa-ico { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--vert-clair, #e7f2ec); color: var(--vert); display: grid; place-items: center; flex-shrink: 0; }
.feuille-liste b { display: block; }
.feuille-liste small, .feuille-liste span span { color: #667781; font-size: .82rem; }
#liste-rapides button { display: grid; gap: 2px; }
#liste-rapides span { color: #54656f; font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vide-feuille { color: #667781; text-align: center; padding: 20px; }

/* Écran d'appel */
.ecran-appel { position: fixed; inset: 0; z-index: 130; background: linear-gradient(170deg, var(--vert), #06261a); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 20px; text-align: center; }
.appel-avatar { width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; margin-bottom: 10px; animation: pulse 1.8s infinite; }
.appel-avatar .ico { width: 46px; height: 46px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 70% { box-shadow: 0 0 0 26px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.appel-nom { font-size: 1.5rem; font-weight: 800; margin: 0; }
.appel-statut { margin: 0; opacity: .85; min-height: 1.4em; }
.appel-minuteur { margin: 0; font-size: 1.3rem; font-variant-numeric: tabular-nums; min-height: 1.4em; }
.appel-boutons { display: flex; gap: 28px; margin-top: 40px; }
.rond-appel { display: grid; justify-items: center; gap: 8px; background: none; border: 0; color: #fff; font-weight: 700; font-size: .85rem; cursor: pointer; }
.rond-appel .ico { width: 64px; height: 64px; padding: 18px; border-radius: 50%; background: rgba(255,255,255,.16); }
.rond-appel.decrocher .ico { background: #1fae5b; }
.rond-appel.raccrocher .ico { background: #e0245e; }
.rond-appel.muet.actif .ico { background: #fff; color: var(--vert); }

/* Alerte globale d'appel entrant (pages hors discussion) */
.alerte-appel { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 90; background: #111b21; color: #fff; border-radius: 16px; padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.35); max-width: 460px; margin: 0 auto; }
.alerte-appel .ico { width: 26px; height: 26px; color: #1fae5b; flex-shrink: 0; }
.alerte-appel div { flex: 1; }
.alerte-appel a, .alerte-appel button { border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 800; cursor: pointer; text-decoration: none; }
.alerte-appel a { background: #1fae5b; color: #fff; }
.alerte-appel button { background: rgba(255,255,255,.15); color: #fff; }

/* Liste des discussions */
.liste-disc { list-style: none; margin: 0; padding: 0; }
.liste-disc a { display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: #fff; color: inherit; text-decoration: none; position: relative; }
.liste-disc a::after { content: ""; position: absolute; left: 70px; right: 0; bottom: 0; border-bottom: 1px solid #eef1f0; }
.liste-disc a:hover { background: #f5f6f6; }
.liste-disc a.actif { background: #e9edef; }
.liste-disc .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--vert-clair, #e7f2ec); color: var(--vert); display: grid; place-items: center; font-weight: 800; flex-shrink: 0; font-size: 1.05rem; }
.liste-disc .avatar.equipe { background: #e8e3ff; color: #5b3bb3; }
.liste-disc .avatar .ico { width: 24px; height: 24px; }
.liste-disc .corps { flex: 1; min-width: 0; }
.liste-disc .ligne1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.liste-disc .ligne1 strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.liste-disc .ligne1 time { font-size: .74rem; color: #667781; flex-shrink: 0; }
.liste-disc .ligne2 { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 2px; }
.liste-disc .apercu { color: #667781; font-size: .87rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-disc .nb { background: #1fae5b; color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 800; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; flex-shrink: 0; }
.liste-disc .non-lue strong { font-weight: 800; }
.liste-disc .non-lue time { color: #1fae5b; font-weight: 700; }
.liste-disc .etiquette { font-size: .68rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: #eef1f0; color: #54656f; margin-left: 4px; vertical-align: 1px; }
.liste-disc .vide { padding: 30px 16px; color: #667781; text-align: center; }
.duree-audio { font-size: .75rem; color: #667781; font-variant-numeric: tabular-nums; min-width: 30px; }