/* ==========================================================================
   Peça · linha de mensagem
   Altura fixa de 44rem, sete colunas na mesma ordem em A7, A6 e U3.
   Quem manda e o assunto dividem uma célula só. A linha inteira é clicável e
   leva ao detalhe; o botão de ação fica na última coluna e só aparece quando
   existe ação possível.

   A escada de colunas está aqui, e não na tela, porque é a peça que decide
   o que cabe em cada largura:
     estreito  remetente · estado · régua de 4 blocos   (ação vai para o rodapé)
     mobile    + horário e destinatário
     tablet    + os três marcadores e o número da régua
     laptop    + a coluna de ação, tabela inteira
   ========================================================================== */

.lm-rolagem { min-width: 1164rem; }
.mobile .lm-rolagem { min-width: 0; }

.lm,
.lm-cabeca {
  grid-template-columns: 64rem minmax(0, 1fr) minmax(0, 1fr) 92rem 176rem 118rem 140rem;
}

.lm { position: relative; }

.lm__hora {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.lm__dia { display: block; font-size: 9rem; letter-spacing: .06em; margin-top: 1rem; }
.lm__de { min-width: 0; }
.lm__remetente {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm__remetente:hover { text-decoration: none; color: var(--ink); }
/* Área clicável: a linha inteira, sem aninhar botão dentro de botão. */
.lm__remetente::after { content: ''; position: absolute; inset: 0; }
.lm__assunto {
  font-size: 11rem;
  color: var(--ink-3);
  margin-top: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm__para {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12rem;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm__entrega { display: flex; align-items: center; gap: 8rem; min-width: 0; }
.lm__estado {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10rem;
  letter-spacing: .08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lm__acao { position: relative; z-index: 1; }

/* --- escada de colunas ---------------------------------------------------- */

.mobile .lm,
.mobile .lm-cabeca { grid-template-columns: 52rem minmax(0, 1fr) minmax(0, 1fr) 132rem 40rem; }
.mobile .lm__auth,
.mobile .lm__acao { display: none; }
.mobile .lm .regua-caixa__relogio { display: none; }

.tablet .lm,
.tablet .lm-cabeca { grid-template-columns: 58rem minmax(0, 1fr) minmax(0, 1fr) 92rem 150rem 100rem; }
.tablet .lm__auth { display: flex; }
.tablet .lm .regua-caixa__relogio { display: block; }

.estreito .lm,
.estreito .lm-cabeca { grid-template-columns: minmax(0, 1fr) 26rem 68rem; }
.estreito .lm__hora,
.estreito .lm__para { display: none; }
.estreito .lm__estado { display: none; }
/* «ENTREGA» não cabe numa coluna de 26rem; a coluna vira só o glifo, e a
   legenda embaixo da tabela continua explicando o que cada um quer dizer. */
.estreito .lm__cab-entrega { visibility: hidden; }
.estreito .lm { height: 56rem; }

/* Variante curta: A6 · aba de mensagens e telas sem a coluna «para». */
.lm--curta,
.lm-cabeca--curta { grid-template-columns: 64rem minmax(0, 1fr) 176rem 118rem 150rem; }
.lm--curta .lm-rolagem { min-width: 900rem; }
.mobile .lm--curta,
.mobile .lm-cabeca--curta { grid-template-columns: 52rem minmax(0, 1fr) 132rem; }