/* chat.css — o botão pequeno e o painel de chat (docs/specs/chat.md §7; ui/widgets/chatPanel.js).

   ONDE: canto esquerdo, com a base do botão em y 290 (px de arte). Medido nas duas telas em que ele existe:
   · corrida: o feed de loot/abates (`hud.css › .loot-feed`) nasce em `bottom: 4` e sobe até 5 linhas de 10 + 1 de vão
     (`game/juice/killFeed.js › max`), ou seja até y ≈ 293; o quadro do jogador e os toasts moram no alto (y ≤ ~200); a
     barra de habilidades e as poções ficam no centro, e Habilidades/Mochila/Auto/Sair à direita. O herói corre em
     x ≈ 200–245, por isso o painel abre PARA CIMA, colado na borda, e não para a direita;
   · lobby: a barra (Exploração…Menu) fica em y 336–352 e o trilho de pendências à direita; à esquerda, acima da barra,
     só o mar da ilha.
   FECHADO (só o botão), z 8: ABAIXO das janelas (10 + N) e dos seletores de modo do lobby (9), acima da ilha e do mapa
   de nódulos (1). As janelas nascem encostadas à esquerda (Mochila, Clã, Trabalhadores, Atributos em x 4) e, por cima
   delas, o botão tapava o ouro da Mochila e os botões do Clã: janela aberta cobre o botão.
   ABERTO (`.is-open`), z 45: o jogador pediu o painel, e ele fica acima das janelas e da barra do lobby (41), abaixo do
   tooltip (50), do menu de contexto (60), dos modais (100), dos toasts (110) e das dicas (120). Abrir uma janela NOVA
   com o painel aberto e o foco fora dele recolhe o painel (`chatPanel.js › render`): ele nunca cai para BAIXO de uma
   janela aberto, porque ali apareceria pelo furo da prévia do paperdoll da Mochila (`widgets/equipPanel.js`). */

.chat {
  position: absolute;
  left: calc(4 * var(--px));
  bottom: calc(70 * var(--px));
  z-index: 8;
  pointer-events: none;
}
.chat.is-open { z-index: 45; }
/* CARTA DO MAR aberta (`.is-node-map`): o FILTRO da carta mora no canto esquerdo (work.css › `.node-map-filters`, x 4…190 e
   y 306…356; o painel de material abre acima dele, de x 32 em diante — docs/specs/workers-nodes.md §7.13) e, no lugar de
   sempre (y 266…290), o botão do chat ficaria sobre o pé da carta. Com a carta aberta o botão sobe: y 250…274, acima do
   filtro e à esquerda do painel de material (que segue à vista); o painel do chat, que abre para cima a partir dele, vai de
   y 118 a 246 — abaixo da barra da carta (y 4…28). Até 2026-10-02 quem estava ali era a legenda de 210×77. */
#ui-root:has(.screen-lobby.is-node-map) .chat { bottom: calc(86 * var(--px)); }
.chat.hidden, .chat-panel.hidden, .chat-note.hidden, .chat-tab-badge.hidden { display: none; }
/* Modal aberto: o chat fica ABAIXO do véu, mesmo aberto. O resumo da corrida tem véu em z 42 (screens.css) e o
   `modal.js › inertBehind` já deixa o chat inerte atrás dele — por cima do véu ele ficaria aceso e sem responder ao
   clique. */
#ui-root:has(.modal-backdrop) .chat { z-index: 8; }
.chat > * { pointer-events: auto; }

/* Botão: 24×24 com o ícone 16×16 no miolo (a mesma caixa das abas de ícone do banco, windows.css › .bank-tab). */
.btn.chat-btn {
  position: relative;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  min-height: 0;
  padding: 0;
}
.btn.chat-btn.is-active { border-image-source: url(../assets/ui/buttons/btn_primary.pressed.png); }
.chat-btn-icon { flex: none; }
/* o selo é a peça `.btn > .lobby-badge` (screens.css): mesmo desenho do selo da barra do lobby */

/* Painel COMPACTO: moldura do tooltip (4 px), 184 × 128, aberto PARA CIMA a partir do botão (4 px de vão). Na corrida
   ele vai de x 4 a 188 e de y 134 a 262: não alcança o herói (x ≈ 200+) nem o quadro do jogador (y ≤ 78); os toasts de
   baixo do quadro (z 110) passam por cima dele. A lista cabe ~9 linhas de 10 px, ~37 letras por linha. */
.chat-panel {
  position: absolute;
  left: 0;
  bottom: calc(28 * var(--px));
  width: calc(184 * var(--px));
  height: calc(128 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  padding: calc(1 * var(--px));
  box-sizing: border-box;
}

.chat-tabs { flex: none; display: flex; gap: calc(2 * var(--px)); }
.chat-tab {
  min-height: calc(12 * var(--px));
  padding: 0 calc(3 * var(--px));
  gap: calc(2 * var(--px));
}
.chat-tabs .tab:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
/* aba travada (Clã sem clã): recebe ponteiro para a dica abrir, mas se lê como apagada */
.chat-tab.is-disabled { color: var(--c-text-dim); opacity: 0.55; cursor: default; }
/* selo da aba: o mesmo dourado do selo do botão */
.chat-tab-badge {
  min-width: calc(8 * var(--px));
  padding: 0 calc(1 * var(--px));
  background: var(--c-gold);
  color: var(--c-text-dark);
  text-align: center;
  line-height: calc(8 * var(--px));
}

/* A lista rola (entra no mecanismo único de `scroll-fade.css`); o miolo com `margin-top: auto` cola a conversa curta
   no FIM, como todo chat (o molde de clan.css › .clan-chat-lines). */
.chat-lines {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 calc(2 * var(--px));
  line-height: calc(10 * var(--px));
  background: var(--c-shade);
  scrollbar-width: thin;
  --scroll-fade-pad: calc(10 * var(--px));
}
.chat-lines:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.chat-lines-inner { margin-top: auto; }
.chat-line { padding: calc(1 * var(--px)) 0 0; overflow-wrap: anywhere; }
.chat-line > * + * { margin-left: calc(2 * var(--px)); }
.chat-name { color: var(--c-text); }
.chat-line.is-mine .chat-name { color: var(--c-ok); }
.chat-line > .chat-colon { margin-left: 0; }
.chat-empty { padding: calc(2 * var(--px)) 0; }
.chat-empty.has-more { width: fit-content; }

/* O NOME é um botão (chat.md §7.2): abre o menu do nome. Lê-se como texto — sem moldura, na cor do nome —, e o que diz
   que ele responde é o cursor, o sublinhado no hover e o contorno dourado no foco. A menção `@Nome` dentro da fala é o
   mesmo botão, em ouro. */
/* sem `margin` aqui: o vão entre a hora e o nome é o `.chat-line > * + *` acima (a regra de mesma força, declarada
   depois, o zerava — "05:35Lyra" colados, visto na captura do E2E de 2026-10-01) */
.chat-who {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.chat-who.chat-name { color: var(--c-text); }
.chat-line.is-mine .chat-who.chat-name { color: var(--c-ok); }
.chat-who:hover { text-decoration: underline; text-underline-offset: calc(1 * var(--px)); }
.chat-who:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
.chat-mention { color: var(--c-gold); }
/* a menção ao MEU personagem: ouro cheio atrás do nome, letra escura — o "@Kil" salta da fala */
.chat-mention.is-me { color: var(--c-text-dark); background: var(--c-gold); padding: 0 calc(1 * var(--px)); }
/* a linha que me cita (de outro): fio dourado à esquerda e o fundo puxado ao ouro. A cor nunca vem sozinha (§8.7): o
   meu nome está escrito na própria fala, e o leitor de tela ouve "Menciona você" (`.sr-only` no começo da linha). */
.chat-line.is-mention {
  background: rgba(224, 176, 64, 0.16);
  box-shadow: inset calc(2 * var(--px)) 0 0 var(--c-gold);
  padding-left: calc(3 * var(--px));
}

/* A quem o Privado escreve (chat.md §7.4): uma linha fina entre a conversa e o campo, só na aba Privado. */
.chat-to { flex: none; line-height: calc(9 * var(--px)); padding: 0 calc(2 * var(--px)); overflow-wrap: anywhere; }
.chat-to.hidden { display: none; }
/* (a força de `.chat-who.chat-name`, que pinta o nome de branco: sem ela o destinatário saía branco — captura do E2E) */
.chat-who.chat-to-name { color: var(--c-gold); }

.chat-row { flex: none; display: flex; gap: calc(2 * var(--px)); position: relative; }
.chat-field { flex: 1; min-width: 0; }
.chat-row .btn { min-height: calc(12 * var(--px)); padding: 0 calc(3 * var(--px)); }
.chat-note { flex: none; line-height: calc(9 * var(--px)); }
/* S4: o sussurro que NÃO saiu (o texto continua no campo) — vermelho, onde os olhos estão; o toast conta o porquê */
.chat-note.is-failed { color: var(--c-danger); }

/* A lista do `@` (chat.md §7.3): sobe colada ao campo, por cima do fim da conversa, com no máximo 5 nomes. A opção
   ativa (setas) e a do hover têm o mesmo realce das entradas do menu de contexto (windows.css › .ctx-menu-item). */
.chat-suggest {
  position: absolute;
  left: 0;
  bottom: calc(100% + 1 * var(--px));
  min-width: calc(72 * var(--px));
  max-width: 100%;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.chat-suggest.hidden { display: none; }
.chat-suggest-item { padding: 0 calc(3 * var(--px)); line-height: calc(10 * var(--px)); cursor: pointer; white-space: nowrap; }
.chat-suggest-item:hover, .chat-suggest-item.is-active { background: rgba(255, 255, 255, 0.12); color: var(--c-gold); }

/* "@" no selo (o do botão e o da aba, `.is-mention`) quando há menção ao MEU personagem: a MESMA peça dourada, com a
   forma "@" no lugar do número — a informação é a forma, não a cor (§8.7), e não há regra de cor própria aqui. */

/* --- chatlink --- ITEM NO CHAT (docs/specs/chat.md §7.5).
   A PEÇA (`ui/widgets/chatLinkChip.js`), a mesma na fala do painel, na aba Chat da janela do clã e no toast do sussurro:
   · `.chat-link-box` — o ÍCONE: a PEÇA ESTÁTICA de 20 (`.item-art.is-mini` de nine-slice.css; `widgets/itemArt.js ›
     itemArtEl`), a Mochila em miniatura — a base `slot_empty`, o ícone de 16, a moldura de qualidade `slot_q_<key>` em 1:1
     (só equipamento com instância; o modelo, o material e o consumível ficam com a base neutra, como na Mochila) e o selo de
     tier ↖, por cima da moldura pela ordem dos filhos. --- linkchat --- (pedido do dono, 2026-10-02: "a borda do ícone do item
     não está condizendo com a qualidade, tá sempre branco") NENHUMA regra daqui desenha a borda da peça: ela é a PNG da série,
     nunca a cor `--q<id>`, que é de TEXTO — o fio de 1 px que morava aqui saía branco no Normal, no Radiante e em todo material;
   · `.chat-link` — o CHIP da fala (pedido do dono, 2026-10-01: "quando linka um item no chat, tem que exibir o icone do item
     antes do nome"): a peça ANTES do `[Nome]`, numa caixa só (`inline-flex`), que nunca quebra entre os dois; o nome longo
     quebra DENTRO do chip, ao lado da peça (`max-width: 100%`). ALINHAMENTO: o nome é a linha de base do chip
     (`align-self: baseline`) com 5 px acima e abaixo — a caixa de 10 px dele no meio da peça de 20 —, então a fala em
     volta e o nome do item ficam na MESMA linha de base, e a linha que tem item cresce para 22 px (a peça e o respiro, abaixo)
     em vez de a peça invadir a de cima e a de baixo. A cor é do NOME (`.q<id>` gerada de qualities.json no boot — nunca cor aqui; material, consumível e
     template em `.text-gold`): o Brilhante (`.is-shining-text`, o fundo recortado pelo texto) no chip apagaria o numeral do
     selo de tier, que herdaria o preenchimento transparente. Lê-se como texto, como o nome do autor (`.chat-who`): o que diz
     que ele responde é o cursor, o sublinhado do nome e a base da peça acesa no hover (a do slot, nunca a moldura — o bloco
     `@media (hover: hover)` do fim) e o contorno dourado no foco. O clique fixa o tooltip da peça
     (com a arte dela no cabeçalho); o botão direito abre o menu de consulta. `.is-static` = a peça do toast, que não recebe
     ponteiro.
   A PEÇA É BLOCO (`.item-art { display: block }`, nine-slice.css): na faixa acima da caixa ela mora num botão `display: block`
   (`.chat-draft-ico`), onde um <span> inline ignoraria o width/height — a moldura e o selo (absolutos) se ancorariam no
   fragmento de texto, com metade da largura (revisão de 2026-10-01, ainda com a casinha de 16). No chip ela é item flex.
   RESPIRO: 1 px acima e abaixo do chip — a fala que quebra entre dois itens empilhava as peças aro com aro, e as duas
   linhas se liam como dois slots de inventário (revisão de 2026-10-01). */
.chat-link {
  display: inline-flex;
  align-items: flex-start;
  gap: calc(2 * var(--px));
  max-width: 100%;
  vertical-align: baseline;
  margin: var(--px) 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-link.is-static { cursor: default; }
.chat-link > .chat-link-box { flex: none; }
.chat-link-name {
  align-self: baseline;
  min-width: 0;
  margin: calc(5 * var(--px)) 0;
  overflow-wrap: anywhere;
}
.chat-link:not(.is-static):hover > .chat-link-name { text-decoration: underline; text-underline-offset: calc(1 * var(--px)); }
/* (o hover da PEÇA mora no bloco `@media (hover: hover)` do fim deste arquivo, junto com o da faixa) */
.chat-link:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: 0; }

/* Acima da caixa, os itens que ainda NÃO saíram (revisão de 2026-10-01): o ÍCONE da peça, não o nome — o nome está escrito
   UMA vez, na caixa (G6), e por extenso no `aria-label` do ícone (G7); o chip com o nome repetia a caixa letra por letra e
   cortava com reticências com dois itens. O ícone é a `.chat-link-box` acima (a MESMA do chip da fala). Ele é um botão: o
   toque e o clique fixam o tooltip da peça (sem a arte no cabeçalho: ele abre ao lado do próprio ícone), o botão direito e
   o toque longo abrem o menu dela. O × ao lado tira o item (e o `[Nome]` dele) da mensagem. Uma faixa de 20 px (a peça
   estática de 20, com a moldura de qualidade da Mochila) que só existe com item linkado; três (links.max) cabem com folga
   nos 184. O item que saiu de mim antes do envio fica apagado. */
.chat-drafts {
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  gap: calc(3 * var(--px));
  padding: 0 calc(1 * var(--px));
}
.chat-drafts.hidden { display: none; }
.chat-draft {
  display: inline-flex;
  align-items: center;
  flex: none;
  background: var(--c-shade);
}
.chat-draft-ico {
  display: block;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.chat-draft-ico:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
/* saiu de mim (vendido, descartado, no Leilão): apagado — o porquê está no Enviar travado e no `aria-label` */
.chat-draft.is-gone .chat-link-box { opacity: 0.35; }
/* o × é um alvo de toque inteiro (11 × 20, a altura da peça), não só o glifo */
.chat-draft-x {
  flex: none;
  width: calc(11 * var(--px));
  height: calc(20 * var(--px));
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: calc(20 * var(--px));
  color: var(--c-text-dim);
  cursor: pointer;
}
.chat-draft-x:hover { color: var(--c-text); background: rgba(255, 255, 255, 0.12); }
.chat-draft-x:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.chat-draft.is-gone .chat-draft-x { color: var(--c-danger); }

/* --- linkchat --- O HOVER da peça (o chip da fala e o ícone da faixa) é o da série: a BASE acende (`slot_hover`, o mesmo do
   `.slot:hover` da Mochila) e a moldura de qualidade fica como está. Nada de `filter` na peça: ele clareava a MOLDURA junto
   (revisão de 2026-10-02: o Normal `#8a8e98` virava `#acb1be`, quase o branco do pedido "tá sempre branco"; a Obra-prima
   `#f7cf4a` virava `#ffff5c`), justo quando o jogador olha para ela. Só onde o ponteiro PAIRA (`hover: hover`): no celular o
   `:hover` gruda no chip depois do toque que fixa a popup, e a peça seguia acesa ao lado da popup. */
@media (hover: hover) {
  .chat-link:not(.is-static):hover > .chat-link-box,
  .chat-draft-ico:hover > .chat-link-box { border-image-source: url(../assets/ui/slots/slot_hover.png); }
}