/* friends.css — janela de amigos (js/ui/windows/friends.js). Dona: trilha do client de amigos.
   Geometria: 440×258 externos → 424×228 de corpo. Abas (12) | painel da aba (≈204).
   A LISTA é uma grade de DOIS cartões por linha (208 × 38): com o retrato de 36 px um cartão por linha mostraria 5
   amigos e sobraria metade da largura vazia; em duas colunas cabem 10 nomes na tela sem rolar, que é a medida de
   leitura que esta janela tinha de provar.
   Medidas em px de arte: calc(N * var(--px)); nada de transform em texto; ampliação de arte só por fator inteiro.
   O `<link>` desta folha entra pelo próprio index.php quando ele a citar; até lá o widget de retrato já injeta a
   dele e esta segue o mesmo caminho (ver `ensureFriendsCss` em windows/friends.js). */

/* ---- moldura e abas ------------------------------------------------------------------------------------------ */
.friends-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* devolve os 2 px que a `.window-body` toma da faixa da moldura (mesmo ajuste da janela de clã) */
  padding: 0 calc(2 * var(--px));
  overflow: hidden;
}
.friends-tabs {
  flex-shrink: 0;
  margin-bottom: calc(2 * var(--px));
}
.friends-tab {
  min-height: calc(12 * var(--px));
  padding: 0 calc(4 * var(--px));
  gap: calc(2 * var(--px));
}
.friends-tabs .tab:focus-visible { outline: var(--px) solid var(--c-gold); outline-offset: 0; }
/* selo da aba (pedidos esperando resposta): irmão do rótulo, nunca um elemento interativo dentro do botão */
.friends-tab-badge {
  min-width: calc(8 * var(--px));
  padding: 0 var(--px);
  background: var(--c-danger);
  color: #fff;
  text-align: center;
  line-height: calc(8 * var(--px));
}

.friends-panes {
  position: relative;
  flex: 1;
  min-height: 0;
}
.friends-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  overflow: hidden;
}

/* Painel rebaixado com rolagem própria: o `::before` do `.panel-inset` (inset −4) viraria área rolável se a rolagem
   ficasse no próprio painel — mesmo arranjo da lista de membros do clã. */
.friends-list { flex: 1; min-height: 0; }
.friends-scroll {
  position: absolute;
  inset: calc(-4 * var(--px));
  padding: var(--px) calc(2 * var(--px));
  /* coluna flex para o estado vazio poder se centralizar (`margin: auto 0`) sem alterar o empilhamento do resto */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #575273 #12101c;
}
@supports selector(::-webkit-scrollbar) {
  .friends-scroll { scrollbar-width: auto; scrollbar-color: auto; }
  .friends-scroll::-webkit-scrollbar { width: calc(6 * var(--px)); }
  .friends-scroll::-webkit-scrollbar-track { background: #12101c; }
  .friends-scroll::-webkit-scrollbar-thumb { background: #575273; border: var(--px) solid #12101c; }
}
.friends-section {
  flex: none;
  line-height: calc(11 * var(--px));
  color: var(--c-gold);
}
.friends-empty { padding: calc(2 * var(--px)) 0; }
.friends-none {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--px));
  align-items: center;
  text-align: center;
  padding: calc(6 * var(--px)) calc(2 * var(--px));
  /* no meio do painel: um convite a agir não fica pendurado no topo de um retângulo vazio */
  margin: auto 0;
}
.friends-grid, .friends-row, .friends-req, .friends-section, .friends-empty { flex: none; }
.friends-none-title { color: var(--c-text); }
.friends-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(4 * var(--px));
  line-height: calc(10 * var(--px));
}

/* ---- gramática de enxugamento (docs/ux-casos.md §13) ------------------------------------------------------ */
/* Ficha "ícone + valor": o rótulo escrito vira a peça de arte que já existe, e a palavra vai para o `aria-label`.
   Nenhum PNG novo — `ico_power`, `ico_online` e `ico_offline` já estão em `manifest.ui`. */
.friends-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--px);
  flex: none;
}
.friends-ico {
  flex: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.friends-ico.is-power { width: calc(9 * var(--px)); height: calc(9 * var(--px)); background-image: var(--ui-ico_power); }
.friends-ico.is-online { width: calc(8 * var(--px)); height: calc(8 * var(--px)); background-image: var(--ui-ico_online); }
/* botão SÓ de ícone (a ficha pública do amigo), no molde de `.inventory-links` em windows.css: sem rótulo, o
   `.is-disabled` precisa escurecer o ÍCONE — a moldura sozinha não distingue travado de destravado em 1×. */
.friends-actions > .btn.friends-btn-ico { padding: 0 var(--px); gap: 0; }
.friends-actions > .btn.friends-btn-ico.is-disabled .btn-icon { opacity: 0.5; }

/* ---- lista: grade de cartões ---------------------------------------------------------------------------------- */
.friends-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(2 * var(--px));
}
.friends-card {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  padding: var(--px);
  min-width: 0;
  cursor: pointer;
}
.friends-card:hover { background: rgba(255, 255, 255, 0.08); }
.friends-card.is-selected { background: rgba(224, 176, 64, 0.18); outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.friends-card:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
/* o retrato não recebe ponteiro: quem é clicável é o cartão inteiro */
.friends-card > .portrait { pointer-events: none; }
/* As linhas começam no MESMO y em todo cartão da fileira: o bloco reserva as três (a 3.ª, "há N min", só existe para
   quem está offline) e não centra o que sobra — centrado, o nome do amigo online descia 5 px em relação ao do offline
   ao lado (revisão de 2026-10-01). */
.friends-card-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: calc(30 * var(--px));
  gap: 0;
  min-width: 0;
  flex: 1;
}
.friends-card-line {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  line-height: calc(10 * var(--px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friends-card-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-text);
}
.friends-card-level { flex: none; }
.friends-card-class { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Presença (G2 + §8.7): a marca do estado é a peça de `art/src/ui/icons_friends.py` — disco CHEIO de esmeralda ×
   argola VAZADA de pedra. É a FORMA que separa os dois, não a cor; e a palavra ("Conectado"/"Desconectado") vive no
   `aria-label`, porque aqui o ícone É o nome (UX-GRAMATICA §12.2, caso 4). Antes esta janela desenhava um quadrado
   de CSS próprio enquanto as duas peças, feitas para esta lista, não eram usadas por ninguém. */
.friends-dot {
  flex: none;
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  background-image: var(--ui-ico_offline);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.friends-dot.is-online { background-image: var(--ui-ico_online); }

/* ---- barra de ações do amigo escolhido ------------------------------------------------------------------------ */
.friends-actions {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(3 * var(--px));
  row-gap: var(--px);
  min-height: calc(12 * var(--px));
}
.friends-actions .btn { min-height: calc(12 * var(--px)); padding: 0 calc(3 * var(--px)); }
/* A barra do amigo escolhido: os botões da MESMA fileira com a MESMA altura. O ícone 16×16 (Desafiar, a ficha) estica o
   botão dele e a fileira saía em degraus — Sussurrar 14, Desafiar 18, ficha 18, Remover 14 (revisão do duelo, 2026-10-01).
   Esticados à altura do mais alto, sem número mágico; o nome fica no meio da fileira. */
.friends-pane-list > .friends-actions { align-items: stretch; }
.friends-pane-list > .friends-actions > .friends-bar-name { align-self: center; }
.friends-bar-name {
  color: var(--c-gold);
  max-width: calc(90 * var(--px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- pedidos --------------------------------------------------------------------------------------------------- */
.friends-req {
  display: flex;
  gap: calc(3 * var(--px));
  padding: calc(2 * var(--px)) 0;
  border-bottom: var(--px) solid rgba(255, 255, 255, 0.1);
}
.friends-req > .portrait { flex: none; }
.friends-req-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--px); }
.friends-req-head { display: flex; align-items: center; gap: calc(3 * var(--px)); line-height: calc(10 * var(--px)); white-space: nowrap; }
.friends-req-name { color: var(--c-text); max-width: calc(70 * var(--px)); overflow: hidden; text-overflow: ellipsis; }
.friends-req-spacer { flex: 1; }
.friends-req-msg { line-height: calc(9 * var(--px)); overflow-wrap: anywhere; }
.friends-req-actions { display: flex; gap: calc(3 * var(--px)); padding-top: var(--px); }
.friends-req-actions .btn { min-height: calc(11 * var(--px)); padding: 0 calc(3 * var(--px)); }

/* ---- bloqueados ------------------------------------------------------------------------------------------------ */
.friends-row {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  min-height: calc(14 * var(--px));
  padding: 0 var(--px);
  line-height: calc(10 * var(--px));
  white-space: nowrap;
}
.friends-row + .friends-row { border-top: var(--px) solid rgba(255, 255, 255, 0.08); }
.friends-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--c-text); }
.friends-row-when { flex: none; }
.friends-row .btn { min-height: calc(11 * var(--px)); padding: 0 calc(3 * var(--px)); }

/* ---- adicionar -------------------------------------------------------------------------------------------------- */
/* B188: o campo é `.input` (base.css) — cor, borda, altura e placeholder vêm de lá. Aqui fica só o LAYOUT: numa
   fileira de botões o campo não pode crescer sozinho. Antes esta regra pintava um campo próprio (#12101c/#575273,
   24 px) ao lado de um `.input` de 28 px na janela vizinha. */
.friends-input {
  flex: none;
  min-width: 0;
}
.friends-problem { flex: none; min-height: calc(10 * var(--px)); line-height: calc(10 * var(--px)); overflow-wrap: anywhere; white-space: normal; }
.friends-problem.is-error { color: var(--c-danger); }
/* O sussurro saiu desta janela: a conversa mora na aba Privado do painel de chat (css/chat.css; docs/specs/chat.md §7.4). */