/* beacon-quotidien.css — chargé après beacon.css (règle du projet : fichiers < 400 lignes). */
/* V5 usage quotidien (11/2026) : colonnes alignées, heure entière, lecture mobile compacte. */
/* Pastilles collées à droite de la colonne expéditeur : elles s'alignent d'une ligne à l'autre,
   quelle que soit la longueur du nom (« Spam ? » est placé avant le domaine dans le HTML). */
.mail-row .row-sender { flex: 1 1 0; }
.mail-row .row-time { overflow: visible; font-variant-numeric: tabular-nums; }

.mail-from { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mail-from-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-from-addr {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 720px) {
  /* 9 actions en icônes sur une seule ligne défilable : le mail commence dans le premier écran. */
  .mail-head {
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 10px;
  }
  .mail-head .btn-label { display: none; }
  .mail-head [data-back] { flex: none; }
  .mail-actions {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mail-actions::-webkit-scrollbar { display: none; }
  /* Le fondu à droite signale qu'on peut faire défiler les actions. */
  .mail-actions {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    padding-right: 24px;
  }
  .mail-head .btn {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }
  .mail-head .btn .btn-svg, .mail-head .btn .btn-svg svg { width: 18px; height: 18px; }
  .mail-from { flex-direction: column; align-items: flex-start; gap: 1px; }
  .mail-from-name, .mail-from-addr { max-width: 100%; }
}

/* Réglages : nom de la passkey sur une ligne, sa description en dessous (plus de texte technique coupé). */
.passkey-item > .passkey-meta { display: grid; gap: 3px; align-items: start; min-width: 0; }
.passkey-meta strong { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.passkey-item .btn { flex: none; }