/* Le panneau Mails de JARVIS. Préfixe bzgm-. S'ajoute à hub.css (bz-view, bz-vhead, bz-vsub, bz-label, bz-seg, bz-chip, bz-empty). */
.bzgm { gap: 10px; }
.bzgm > .bz-vtop { margin-bottom: 4px; }
.bzgm .bzgm-seg { grid-template-columns: repeat(3, 1fr); margin: 4px 0 4px; }
.bzgm > .bz-label { margin-top: 16px; }
/* Trier par boîte : une pastille par adresse, qui défile à l'horizontale sur téléphone */
.bzgm-filtres { display: grid; gap: 8px; min-width: 0; }
.bzgm-boites { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.bzgm-boites::-webkit-scrollbar { display: none; }
.bzgm-boite { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; max-width: 240px; padding: 0 14px; border: 0; border-radius: 18px; background: rgb(var(--th-w) / calc(.07 * var(--th-fa))); color: var(--dim); font: 560 13.5px/1 var(--font); transition: background .2s, color .2s; }
.bzgm-boite:hover { background: rgb(var(--th-w) / calc(.13 * var(--th-fa))); }
.bzgm-boite[aria-pressed="true"] { background: var(--th-hi); color: var(--th-page); }
.bzgm-boite-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bzgm-boite-n { flex: none; min-width: 20px; padding: 3px 6px; border-radius: 10px; background: var(--blue-fond); color: var(--th-on); font: 650 11.5px/1 var(--font); font-variant-numeric: tabular-nums; text-align: center; }
.bzgm-liste { display: grid; gap: 2px; }
.bzgm-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px 12px 10px; border: 0; border-radius: 18px; background: none; text-align: left; color: var(--ink); transition: background .2s; }
.bzgm-row:hover { background: rgb(var(--th-w) / calc(.06 * var(--th-fa))); }
.bzgm-row.is-key { background: rgb(var(--th-w) / calc(.05 * var(--th-fa))); }
.bzgm-dot { flex: none; width: 8px; height: 8px; margin: 9px 0 0 2px; border-radius: 50%; background: transparent; }
.bzgm-row.is-unread .bzgm-dot { background: var(--blue); }
.bzgm-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.bzgm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bzgm-de { min-width: 0; font: 500 15.5px/1.3 var(--font); letter-spacing: -.01em; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bzgm-row.is-unread .bzgm-de { font-weight: 650; color: var(--th-hi); }
.bzgm-when { flex: none; font: 450 12.5px/1 var(--font); color: var(--faint); font-variant-numeric: tabular-nums; }
.bzgm-objet { font: 450 15px/1.35 var(--font); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bzgm-row.is-unread .bzgm-objet { color: var(--ink); font-weight: 560; }
.bzgm-extrait { font: 450 13.5px/1.4 var(--font); color: var(--faint); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bzgm-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.bzgm-addr, .bzgm-imp { padding: 3px 9px; border-radius: 999px; background: rgb(var(--th-w) / calc(.08 * var(--th-fa))); font: 560 11px/1.2 var(--font); color: var(--faint); }
.bzgm-imp { color: var(--blue); background: rgb(var(--th-blue-rgb) / .14); }

/* Un mail ouvert : du texte brut, rien d'autre */
.bzgm-detail { display: grid; gap: 8px; }
.bzgm [data-retour-interne] { justify-self: start; margin: 0 0 4px -6px; }
.bzgm-detail h3 { font: 700 22px/1.25 var(--font); letter-spacing: -.02em; color: var(--th-hi); outline: none; overflow-wrap: anywhere; }
.bzgm-from { font: 450 13.5px/1.4 var(--font); color: var(--faint); overflow-wrap: anywhere; }
.bzgm-from b { font-weight: 590; color: var(--dim); }
.bzgm-texte { margin-top: 10px; padding: 18px; border-radius: 20px; background: rgb(var(--th-w) / calc(.06 * var(--th-fa))); font: 400 15.5px/1.55 var(--font); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.bzgm-actions { display: flex; margin-top: 6px; }
.bzgm-actions .bz-chip { gap: 8px; }
.bzgm-note { font: 450 12.5px/1.45 var(--font); color: var(--faint); }
.bzgm-err { padding: 12px 14px; border-radius: 16px; background: rgb(var(--th-blue-rgb) / .12); font: 500 14px/1.4 var(--font); color: var(--th-hi); }

/* Les actions d'un mail : ranger tout de suite (avec Annuler), répondre ou écrire (une carte de confirmation) */
.bzgm-actions { flex-wrap: wrap; gap: 8px; }
.bzgm-fait { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; background: rgb(var(--th-w) / calc(.08 * var(--th-fa))); font: 500 14px/1.35 var(--font); color: var(--th-hi); overflow-wrap: anywhere; }
.bzgm-fait.is-fini { color: var(--dim); }
.bzgm-reponse, .bzgm-compose { display: grid; gap: 10px; }
.bzgm-reponse { margin-top: 10px; padding: 14px; border-radius: 20px; background: rgb(var(--th-w) / calc(.05 * var(--th-fa))); }
.bzgm-check { display: flex; align-items: center; gap: 10px; font: 450 14px/1.3 var(--font); color: var(--dim); }
.bzgm-check input { width: 18px; height: 18px; flex: none; }
.bzgm-compose select { min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: rgb(var(--th-w) / calc(.08 * var(--th-fa))); color: var(--ink); font: 450 15px var(--font); }
.bzgm-compose h3 { margin-bottom: 4px; }

/* Les liens du corps d'un mail : le domaine seul, en texte clair souligné sur du verre (le bleu reste pour l'action principale) ; la confirmation est une <dialog>. */
.bzgm-lien { display: inline; max-width: 100%; margin: 0 1px; padding: 1px 9px; border: 0; border-radius: 999px; background: rgb(var(--th-w) / calc(.1 * var(--th-fa))); color: var(--blue-text, var(--th-ink)); font: 560 .92em/1.5 var(--font); text-decoration: underline; text-decoration-color: rgb(var(--th-ink-rgb) / .4); text-underline-offset: 3px; text-align: left; overflow-wrap: anywhere; cursor: pointer; transition: background .2s; }
.bzgm-lien:hover { background: rgb(var(--th-w) / calc(.18 * var(--th-fa))); }
.bzgm-lien:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bzgm-lien-fl { text-decoration: none; display: inline-block; opacity: .7; }
.bzgm-confirm { width: min(420px, calc(100vw - 32px)); margin: auto; padding: 22px; border: 0; border-radius: 24px; background: var(--th-panel); color: var(--ink); box-shadow: 0 24px 60px rgb(var(--th-k) / calc(.6 * var(--th-ka))); }
.bzgm-confirm::backdrop { background: rgb(var(--th-k) / calc(.6 * var(--th-ka))); }
.bzgm-confirm-t { font: 450 14px/1.4 var(--font); color: var(--dim); }
.bzgm-confirm-h { margin: 6px 0 16px; font: 700 20px/1.25 var(--font); letter-spacing: -.02em; color: var(--th-hi); overflow-wrap: anywhere; }
.bzgm-confirm .bzgm-actions .bz-chip { flex: 1 1 auto; justify-content: center; overflow-wrap: anywhere; }

/* Le nom de l'expéditeur, l'objet et l'aperçu se coupent avec « … » : la grille de la ligne ne s'élargit plus à la taille de son contenu */
.bzgm-body { grid-template-columns: minmax(0, 1fr); }
/* Les puces des boîtes : un nom long finit par « … » (jamais coupé net), et la rangée qui défile se fond sur son bord droit pour dire qu'elle continue */
.bzgm-boite { max-width: min(220px, 62vw); }
.bzgm-boites { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); padding-right: 22px; }
/* Dans l'écran Mails, « écrire » et « actualiser » sont dans la barre du haut : ceux de la vue ne flottent plus sous la recherche */
.mze-corps .bzgm .bz-nav { display: none; }

/* Balayer une ligne (comme Mail) : un balayage partiel montre un bouton FIXE qu'on touche pour valider ; plus aucun balayage ne range d'un coup. « Archiver » en violet, « Marquer » en orange.
   Les deux fonds ont un texte noir (≥ 4,5:1 ; du blanc sur ces couleurs n'atteint que 3,5:1 et 2,1:1). Annuler reste après coup. */
.mze li[data-assistant^="mail:"] { border-radius: 18px; }
body.mz .mze li[data-assistant^="mail:"]::before { content: none; display: none; }
body.mz .mze li[data-assistant^="mail:"] > .bzgm-row { background: var(--th-page); transition: transform .24s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
body.mz .mze li[data-assistant^="mail:"] > .bzgm-row.is-key { background: var(--th-deep2); }
body.mz .mze li[data-assistant^="mail:"] > .mzm-act { position: absolute; z-index: 2; top: 0; bottom: 0; width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 0; color: var(--th-page); font: 600 14px/1.15 var(--font); text-align: center; cursor: pointer; visibility: hidden; touch-action: manipulation; }
body.mz .mze li[data-assistant^="mail:"] > .mzm-act.is-archiver { right: 0; left: auto; background: var(--th-purple); }
body.mz .mze li[data-assistant^="mail:"] > .mzm-act.is-marquer { left: 0; right: auto; background: var(--th-orange); }
body.mz .mze li[data-assistant^="mail:"] > .mzm-act:active { filter: brightness(.9); }
body.mz .mze li[data-assistant^="mail:"][data-sens="archiver"] > .is-archiver, body.mz .mze li[data-assistant^="mail:"][data-sens="marquer"] > .is-marquer { visibility: visible; }
/* Le petit ✦ « Confier à JARVIS » de chaque ligne n'a plus sa place ici : il se mettait sous la ligne (une bande vide de 30 px sous chaque mail) ; « Confier à JARVIS » est dans le menu de l'appui long et du clic droit. */
body.mz .mze li[data-assistant^="mail:"] > .bzm-esp { display: none; }
.mze-corps .bz-view > .bzgc-rangee { display: none; }
/* Vous › Réglages › Comptes Google : le titre de l'écran dit déjà « Comptes Google », le bloc n'a pas à le redire */
.mze-corps > .bzgc-comptes > .bz-label:first-child { display: none; }

/* --- Façon Spark : les fonctions de Spark, la DA de JARVIS --- */
/* Les initiales de l'expéditeur (le même rond que les marchands dans Finances, .mze-logo) ; le point bleu du non lu reste à sa gauche */
/* Le point bleu du non lu se pose sur le coin des initiales (la ligne garde sa largeur pour le texte sur iPhone) */
.bzgm-avw { position: relative; flex: none; display: flex; margin-top: 1px; }
.bzgm-avw .bzgm-dot { position: absolute; z-index: 1; top: -1px; left: -3px; width: 12px; height: 12px; margin: 0; box-shadow: 0 0 0 2.5px var(--th-page); display: none; }
.bzgm-row.is-unread .bzgm-avw .bzgm-dot { display: block; }
.bzgm-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--c) 24%, var(--th-panel)); color: color-mix(in srgb, var(--c) 50%, var(--th-hi)); font: 700 15px/1 var(--font); letter-spacing: .01em; }
.bzgm-av.is-groupe { --c: var(--th-gray); }
.bzgm-row:has(.bzgm-avw) { padding-left: 12px; }
.bzgm-pin { flex: none; display: inline-flex; color: var(--faint); }
.bzgm-pin.is-rappel { color: var(--th-orange); }
.bzgm-top .bzgm-de { flex: 0 1 auto; }
.bzgm-top .bzgm-when { margin-left: auto; }
/* Notifications et newsletters : une ligne chacune, qui se déplie */
.bzgm-groupes { display: grid; gap: 2px; margin-top: 6px; }
.bzgm-groupe-bloc.is-ouvert { padding-bottom: 6px; border-radius: 18px; background: rgb(var(--th-w) / calc(.04 * var(--th-fa))); }
.bzgm-groupe .bzgm-boite-n { margin-left: 2px; }
.bzgm-chev { flex: none; display: inline-flex; color: var(--faint); transition: transform .2s; }
.bzgm-chev.is-ouvert { transform: rotate(90deg); }
.bzgm-groupe .bzgm-extrait { -webkit-line-clamp: 1; }
.bzgm-groupe-act { margin: 2px 14px 4px 62px; }
/* « Me le rappeler » : les moments, comme une liste de Réglages */
.bzgm-quand { display: grid; gap: 2px; margin-top: 6px; padding: 10px; border-radius: 20px; background: rgb(var(--th-w) / calc(.05 * var(--th-fa))); }
.bzgm-quand > .bzgm-note { padding: 2px 6px 8px; }
.bzgm-quand-l { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 12px; border: 0; border-radius: 14px; background: none; color: var(--ink); font: 500 15.5px/1.3 var(--font); text-align: left; cursor: pointer; transition: background .2s; }
.bzgm-quand-l:hover { background: rgb(var(--th-w) / calc(.07 * var(--th-fa))); }
.bzgm-quand-l b { font-weight: 560; }
.bzgm-quand-l span { color: var(--faint); font-weight: 450; font-variant-numeric: tabular-nums; }
.bzgm-actions .bz-chip svg { flex: none; }
.bzgm-actions .bz-chip[aria-pressed="true"] { color: var(--blue); }
/* Les réponses rapides : des puces qui défilent, au-dessus du texte */
.bzgm-rapides { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px 22px 2px 2px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
.bzgm-rapides::-webkit-scrollbar { display: none; }
.bzgm-rapides .bzgm-boite { max-width: none; color: var(--ink); }
.mz-ligne .mzm-detail { flex: none; color: var(--faint); font-variant-numeric: tabular-nums; }   /* « Me le rappeler » depuis l'appui long : l'heure à droite */

/* Rubriques (libellés Gmail) : une ligne de hauteur normale, pour que les accents des majuscules (« À faire ») ne soient pas coupés. */
.bzgm-rub-barre { margin-top: 2px; }
.bzgm-rubriques .bzgm-boite-nom, .bzgm-rub-barre .bzgm-boite-nom { line-height: 1.35; }
.bzgm-rubriques > .bzgm-boites + .bz-label, .bzgm-rubriques > .bz-label { margin-top: 10px; }

/* L'agent support : une carte par mail, avec la réponse proposée à relire */
.bzsup-barre { align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.bzsup-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bzsup-carte { padding: 14px; border-radius: 18px; background: rgb(var(--th-w) / calc(.05 * var(--th-fa))); display: grid; gap: 8px; }
.bzsup-carte.is-traiter { box-shadow: inset 3px 0 0 #ff9f0a; }
.bzsup-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bzsup-de { font-weight: 650; }
.bzsup-tete .bzgm-when { margin-left: auto; }
.bzsup-objet { margin: 0; font-weight: 560; }
.bzsup-badge { font: 600 11.5px/1.35 var(--font); padding: 3px 9px; border-radius: 10px; background: rgb(10 132 255 / .14); color: #0a84ff; }
.bzsup-badge.is-escalade, .bzsup-badge.is-accord_marque { background: rgb(255 159 10 / .16); color: #c27400; }
.bzsup-badge.is-partenariat { background: rgb(191 90 242 / .14); color: #9a3fd0; }
.bzsup-texte { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 14px; border: 1px solid rgb(var(--th-w) / .12); background: rgb(var(--th-w) / .03); color: inherit; font: 14.5px/1.5 var(--font); resize: vertical; }
.bzsup-consigne { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 12px; border: 1px solid rgb(var(--th-w) / .1); background: transparent; color: inherit; font: 13.5px/1.4 var(--font); }
.bzsup-base { display: grid; gap: 10px; margin-bottom: 14px; }