/* Correio (docs/specs/ui-gameplay.md §13) — UMA vista por vez dentro da janela (lista · carta · escrever), desenhada
   para o TOQUE (pedido do dono, 2026-10-01: "pensando mais no usuário mobile"). Os três números que mandam:
   a LINHA da lista tem 36 de altura (o tamanho do slot, a unidade de toque do jogo), o botão de ação 24 e o anexo é
   um slot de 36. A janela antiga dividia o miolo em lista | carta e a carta ficava com 1/4 dele (B97), com o
   "Apagar" cortado pela borda (B321): aqui cada vista tem a largura inteira.
   Medidas em px de arte; nada de `transform` em texto (ui-gameplay.md §8.7). */

/* quem rola é a caixa de DENTRO (a lista, o corpo da carta): o miolo nunca ganha uma 2.ª barra */
.mail-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* sem rodapé, a última linha (o aviso de prazo, o "Enviar") encostava na moldura de baixo */
  padding-bottom: calc(2 * var(--px));
}

.mail-view {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- barra da lista: contadores à esquerda, as duas ações à direita ---------------------------------------------- */
.mail-bar {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  flex: none;
  min-height: calc(24 * var(--px));
}
.mail-bar-gap { flex: 1 1 auto; }
/* a pista (`has-more`) tem a largura do que marca (G4), não a da barra */
.mail-counters { display: inline-flex; align-items: center; gap: calc(8 * var(--px)); width: fit-content; min-width: 0; }
.mail-count { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
.mail-count.is-full { color: var(--c-danger); }
.mail-word { color: var(--c-text-dim); }

/* o botão de ação do correio: 24 de altura — o alvo do dedo — e o rótulo inteiro */
.mail-body .btn.mail-act { min-height: calc(24 * var(--px)); padding: 0 calc(6 * var(--px)); }
/* o ◀ das vistas de dentro: quadrado de 24, colado no canto de cima à esquerda (onde o polegar procura "voltar") */
.mail-body .btn.mail-back { flex: none; min-width: calc(24 * var(--px)); min-height: calc(24 * var(--px)); padding: 0; }

/* ---- lista ------------------------------------------------------------------------------------------------------- */
.mail-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  /* o degradê do pé (`scroll-fade.css`) come 12 px: a última linha precisa de respiro para não sair desbotada */
  --scroll-fade-pad: calc(12 * var(--px));
}

/* A LINHA é um botão inteiro (o dedo acerta em qualquer ponto dela): ícone de quem mandou à esquerda, assunto + selo
   + idade em cima, quem mandou + anexo embaixo. A informação toda vai por extenso no `aria-label` (G7). */
.mail-row {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  flex: none;
  width: 100%;
  min-height: calc(36 * var(--px));
  margin: 0;
  padding: calc(2 * var(--px)) calc(4 * var(--px)) calc(2 * var(--px)) calc(3 * var(--px));
  border: var(--px) solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  color: var(--c-text-dim);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  touch-action: manipulation;
}
.mail-row:hover { background: rgba(255, 255, 255, 0.08); }
.mail-row:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
/* não lida: o texto acende e a linha ganha o aro dourado — e o selo `Nova` diz a palavra (a cor nunca vem sozinha) */
.mail-row.is-unread { color: var(--c-text); background: rgba(224, 176, 64, 0.07); border-color: rgba(224, 176, 64, 0.35); }
.mail-row.is-active { border-color: var(--c-gold); }
.mail-row[aria-disabled='true'] { cursor: progress; opacity: 0.6; }

/* a casinha do ícone de origem (a mesma da carta aberta) */
.mail-row-src {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  background: rgba(0, 0, 0, 0.35);
  border: var(--px) solid rgba(255, 255, 255, 0.06);
}
.mail-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.mail-row-top, .mail-row-bottom { display: flex; align-items: center; gap: calc(4 * var(--px)); min-width: 0; }
.mail-row-top { min-height: calc(10 * var(--px)); line-height: calc(10 * var(--px)); }
.mail-row-bottom { min-height: calc(16 * var(--px)); }
/* o ASSUNTO em cima, numa linha só (a carta aberta o tem inteiro): aceso na não lida, apagado na lida */
.mail-row-subject { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.is-unread .mail-row-subject { color: var(--c-text); }
.mail-row-age { flex: none; margin-left: auto; white-space: nowrap; color: var(--c-text-dim); }
/* quem mandou, embaixo e apagado (16 letras de nome cabem inteiras) */
.mail-row-from { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-text-dim); }
.mail-row-attach { flex: none; display: inline-flex; align-items: center; gap: calc(4 * var(--px)); }
.mail-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; color: var(--c-gold); }

/* G2 — selo de estado: moldura + palavra curta + cor (o molde `.codex-seal`). */
.mail-seal {
  flex: none;
  display: inline-block;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  line-height: calc(8 * var(--px));
  white-space: nowrap;
  color: var(--c-text-dim);
}
.mail-seal.is-gold { color: var(--c-gold); }
/* o prazo que acaba (a exceção, G5): vermelho e SEM moldura — "expira em 2 d" é rótulo de prazo (G3, a frase de Clã e
   Amigos), não selo de estado (G2: duas palavras, sem verbo) */
.mail-expires { flex: none; white-space: nowrap; color: var(--c-danger); }

/* G5 — a caixa vazia é UMA marca: a caixa de correio em 2× e um título curto (a explicação mora no gesto dele) */
.mail-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--px));
  color: var(--c-text-dim);
}
.mail-empty-title { width: fit-content; }
.mail-wait { margin: 0; }

/* ---- carta ------------------------------------------------------------------------------------------------------- */
.mail-head { display: flex; align-items: center; gap: calc(4 * var(--px)); flex: none; min-height: calc(26 * var(--px)); }
.mail-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--px)); }
.mail-subject, .mail-head-title {
  margin: 0;
  font-size: var(--text-1);
  line-height: calc(10 * var(--px));
  color: var(--c-gold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* o assunto recebe o foco ao abrir a carta (`windows/mail.js › go`): o aro do `:focus-visible` abraça o TEXTO, não a
   linha inteira até a moldura (assunto longo continua cortado com reticências) */
.mail-subject { align-self: flex-start; max-width: 100%; }
.mail-meta { margin: 0; line-height: calc(10 * var(--px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* o corpo: a largura toda e a altura que sobrar; texto de OUTRO jogador quebra palavra longa em vez de esticar */
.mail-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: calc(4 * var(--px)) calc(6 * var(--px));
  background: rgba(0, 0, 0, 0.25);
  border: var(--px) solid rgba(255, 255, 255, 0.06);
  /* rolando, a última linha (11 px) termina inteira acima do degradê de 12 */
  --scroll-fade-pad: calc(12 * var(--px));
}
/* O degradê de `scroll-fade.css` desbota a CAIXA inteira — fundo e borda de baixo inclusive. Só com o corpo rolando de
   verdade (`is-scrollable`, MEDIDO em `windows/mail.js › syncDetail`); a carta curta termina com a borda reta. A regra
   vence a de `scroll-fade.css` (carregada depois) pela especificidade, o molde de `island.css › .ib-cards`. */
.mail-detail:not(.is-scrollable) { --scroll-fade: 0px; --scroll-fade-pad: calc(4 * var(--px)); }
.mail-detail:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.mail-text { display: block; overflow-wrap: anywhere; white-space: pre-wrap; line-height: calc(11 * var(--px)); }

/* anexos à esquerda (slot de 36), as ações à direita — "Receber" sempre no MESMO canto, carta a carta */
.mail-letter-bar { display: flex; align-items: center; gap: calc(6 * var(--px)); flex: none; min-height: calc(36 * var(--px)); }
.mail-attach { display: flex; align-items: center; gap: calc(4 * var(--px)); flex: 1 1 auto; min-width: 0; }
/* numa barra que não rola, o slot do anexo continua aceitando o toque longo do menu sem disputar a rolagem */
.mail-slot { touch-action: manipulation; }
/* o nome do item ao lado do slot (no toque não há hover): uma linha, na cor da qualidade */
.mail-attach-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* o ouro anexado é uma peça do mesmo tamanho do slot (a moldura do slot vazio, esticada na horizontal) */
.mail-gold {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(36 * var(--px));
  padding: 0 calc(4 * var(--px));
  border: calc(4 * var(--px)) solid transparent;
  border-image: var(--ui-slot_empty, url(../assets/ui/slots/slot_empty.png)) 4 fill / calc(4 * var(--px)) stretch;
  image-rendering: pixelated;
  color: var(--c-gold);
  white-space: nowrap;
}
/* a moeda de 9×9 em 2× (ampliação por fator inteiro, §8.7) */
.mail-gold-ico { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
.mail-actions { display: flex; align-items: center; gap: calc(4 * var(--px)); flex: none; margin-left: auto; }
/* N2 com o prazo (B149): apagado enquanto está longe, vermelho nos 3 últimos dias */
.mail-warn { margin: 0; flex: none; line-height: calc(10 * var(--px)); color: var(--c-text-dim); }
.mail-warn.is-soon { color: var(--c-danger); }
.mail-confirm { margin: 0; overflow-wrap: anywhere; }

/* ---- escrever ---------------------------------------------------------------------------------------------------- */
.mail-form { display: flex; flex-direction: column; gap: calc(4 * var(--px)); flex: 1 1 auto; min-height: 0; }
.mail-field { display: grid; grid-template-columns: calc(44 * var(--px)) minmax(0, 1fr); align-items: center; column-gap: calc(4 * var(--px)); }
.mail-field.is-grow { align-items: stretch; flex: 1 1 auto; min-height: 0; }
.mail-field.is-grow > .mail-label { align-self: start; padding-top: calc(5 * var(--px)); }
.mail-label { color: var(--c-text-dim); white-space: nowrap; }
/* campo de 20 de altura: o alvo do dedo. A fonte é a do jogo (`--text-1`): no iPhone, campo com fonte abaixo de 16 px
   CSS pode ampliar a página ao ganhar foco — não provado aqui (o driver é Chromium); docs/roadmap.md §4 `toque-zoom-ios` */
.mail-input { min-height: calc(20 * var(--px)); padding: 0 calc(4 * var(--px)); }
.mail-textarea { resize: none; height: 100%; min-height: calc(40 * var(--px)); padding: calc(3 * var(--px)) calc(4 * var(--px)); }
.mail-send-row { display: flex; align-items: center; gap: calc(6 * var(--px)); flex: none; }
.mail-note { flex: 1 1 auto; min-width: 0; }
/* S19/B19: "Enviar" com Para/Assunto/Mensagem vazios não fazia NADA — botão aceso, nenhum toast, nenhum destaque.
   Agora o campo que falta fica com o aro vermelho e a linha acima do botão diz o que falta. */
.mail-input.is-error, .mail-textarea.is-error { border-color: var(--c-danger); outline: var(--px) solid var(--c-danger); outline-offset: 0; }
.mail-problem { margin: 0; flex: none; min-height: calc(9 * var(--px)); line-height: calc(9 * var(--px)); color: var(--c-danger); }
.mail-problem.hidden { display: none; }