/* -------------------------------------------------------------- atividade */

.atividade { padding: 18px; }

.atividade-cabeca {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

/* A contagem existe porque a ALTURA parou de anunciar o volume: preso numa caixa, o feed
   parece sempre do mesmo tamanho — e "3 acoes" e "50 acoes" sao tardes muito diferentes. */
.atividade-conta { color: var(--texto-tenue); margin-left: auto; }

/* Escopado ao cabecalho de atividade: solto, `.rotulo` alcancava a barra lateral. */
.atividade-cabeca .rotulo {
  margin: 0;
  color: var(--roxo-claro);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.vazio-feed { color: var(--texto-fraco); font-size: 0.88rem; margin: 4px 0 0; }

/*
 * A ATIVIDADE TEM TETO E ROLA POR DENTRO. O feed e HISTORICO: ele acompanha o console, nao o
 * comanda, e nao pode tomar a tela de quem precisa agir. A barra de rolagem fica VISIVEL (fina)
 * porque e ela que conta que ha mais coisa abaixo.
 */
.feed-rolagem {
  max-height: 22rem;
  overflow-y: auto;
  padding: 2px;
  margin: -2px;
  scrollbar-width: thin;
  scrollbar-color: var(--linha) transparent;
}

.feed-rolagem:focus-visible {
  outline: 2px solid var(--roxo-claro);
  outline-offset: 2px;
  border-radius: var(--raio-m);
}

.feed-rolagem::-webkit-scrollbar { width: 8px; }
.feed-rolagem::-webkit-scrollbar-thumb { background: var(--linha); border-radius: var(--raio-pilula); }

.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ordem {
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  padding: 10px 13px;
  background: color-mix(in srgb, var(--preto) 55%, var(--vidro));
  transition: border-color var(--t-rapido) var(--entrada);
  animation: surgir-acima var(--t-medio) var(--saida) both;
}

/* O hover convida a ler a jornada inteira, sem prometer clique: acende a borda e nada mais. */
.ordem:hover { border-color: var(--linha-viva); }

.ordem.ordem--falhou { border-color: rgba(251, 113, 133, 0.5); }

/* Quem mandou, recuado atras do horario: a pergunta "quem foi?" so aparece depois de algo dar
   errado, e ate la nao pode competir com o que a pessoa veio ver. */
.ordem .autor { color: var(--texto-tenue); }
.ordem .autor::before { content: '·'; margin: 0 5px; opacity: 0.6; }

.linha-um {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.acao { font-weight: 600; }
.quando { margin-left: auto; color: var(--texto-tenue); white-space: nowrap; }

/* O detalhe cabe em duas linhas e corta com reticencias: uma whitelist colada pode ter
   cinquenta SteamIDs, e uma ordem dessas enchia a caixa sozinha. */
.detalhe {
  margin: 3px 0 0;
  color: var(--texto-fraco);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------- a jornada de uma ordem
 * A assinatura da pagina: as tres estacoes entre o clique e a maquina do dono. */

.jornada {
  display: flex;
  align-items: center;
  margin: 9px 0 3px;
}

.no {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--linha);
  background: transparent;
  flex: none;
}

.no.feito { background: var(--roxo-claro); border-color: var(--roxo-claro); }
.no.sucesso { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 8px rgba(52, 211, 153, 0.45); }
.no.falha { background: var(--erro); border-color: var(--erro); box-shadow: 0 0 8px rgba(251, 113, 133, 0.45); }

.no.pulso { animation: pulso-no 1.6s ease-out infinite; }

@keyframes pulso-no {
  0%   { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(168, 85, 247, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

.trecho {
  height: 2px;
  flex: 1;
  background: var(--linha);
  position: relative;
  overflow: hidden;
}

.trecho.feito { background: var(--roxo); }

/* A faisca: onde a ordem esta agora, viajando para a maquina do dono. */
.trecho.viajando::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--roxo-claro));
  animation: viagem 1.4s ease-in-out infinite;
}

@keyframes viagem {
  from { transform: translateX(-100%); }
  to   { transform: translateX(433%); }
}

/* Entregue tres vezes sem resposta: a faisca para, porque fingir movimento mentiria. */
.trecho.parado { background: var(--roxo); }

.legenda {
  display: flex;
  justify-content: space-between;
  color: var(--texto-tenue);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
}

.situacao {
  margin: 6px 0 0;
  color: var(--texto-fraco);
  overflow-wrap: anywhere;
}

/*
 * A resposta em DADOS fica dobrada.
 *
 * Um verbo de leitura (as regras de mutacao, a recompensa) devolve JSON, e a tela que perguntou
 * ja o desenhou como formulario. No feed ele aparecia cru, oito linhas de chaves e colchetes no
 * meio do historico. Aqui o feed diz que a resposta chegou, e o cru fica atras de um clique
 * para quem precisar conferir o que o painel disse palavra por palavra.
 */
.ordem-cru { margin: 6px 0 0; }
.ordem-cru > summary { cursor: pointer; color: var(--texto-tenue); font-size: 0.72rem; list-style: none; }
.ordem-cru > summary::before { content: '+ '; }
.ordem-cru[open] > summary::before { content: '− '; }
.ordem-cru > summary::-webkit-details-marker { display: none; }

.ordem-cru > pre {
  margin: 6px 0 0;
  padding: 8px 10px;
  max-height: 12rem;
  overflow: auto;
  border-radius: var(--raio-p);
  background: var(--preto);
  border: 1px solid var(--linha);
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* O botao de dispensar fica discreto ate o mouse chegar na ordem. No toque nao ha hover,
   entao ele fica visivel. */
.ordem .descartar { opacity: 0.6; transition: opacity var(--t-rapido) var(--entrada); }
.ordem:hover .descartar,
.ordem:focus-within .descartar { opacity: 1; }

@media (hover: none) {
  .ordem .descartar { opacity: 1; }
}

.ordem--concluida .situacao { color: var(--ok); }
.ordem--falhou .situacao { color: var(--erro); }

/* Substituida nao e sucesso nem falha: recua, para o olho parar nas ordens que importam. */
.ordem--substituida { opacity: 0.66; }
.ordem--substituida .situacao { color: var(--texto-fraco); font-style: italic; }

/* ----------------------------------------------------------------- movel */

@media (max-width: 600px) {
  .campo { grid-template-columns: 1fr; gap: 4px; }

  /* Em tela estreita o anuncio vira grade: o contador fica COLADO no campo, e o Send ganha a
     linha inteira. */
  .forma-anuncio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .forma-anuncio input { grid-column: 1; }
  .forma-anuncio .contador { grid-column: 2; justify-self: end; }
  .forma-anuncio button { grid-column: 1 / -1; }
}

/* O movimento do cartao e o batimento e a faisca; quem pediu calma recebe cores paradas. */
@media (prefers-reduced-motion: reduce) {
  .ponto.viva, .no.pulso { animation: none; }
  .trecho.viajando::after { animation: none; width: 100%; opacity: 0.5; }
}

/* --------------------------------------------------------- trocou de maquina? */

/* Logo abaixo do botao que remove: e aqui que o dono esta quando quase perde a loja. Borda
   ambar, e nao roxa — abrir isto tem peso diferente de renomear. */
.bloco-transferir {
  margin: 12px 18px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--atencao) 35%, var(--linha));
  border-radius: var(--raio-p);
  background: var(--elevado);
}

.bloco-transferir > summary {
  color: var(--atencao);
  cursor: pointer;
  font-size: 0.9rem;
}

.aviso-transferir {
  margin: 8px 0;
  font-size: 0.84rem;
  line-height: 1.55;
}

.forma-transferir {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* O seletor cresce e o botao nao: nome de servidor e livre. */
.forma-transferir select {
  flex: 1 1 180px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--preto);
  color: var(--texto);
  font-family: inherit;
  font-size: 0.88rem;
}

.forma-transferir select:focus-visible {
  outline: 2px solid var(--roxo-claro);
  outline-offset: 1px;
}