/* Pedidos de ajuda sobre a plataforma: a conversa entre o gestor de contrato e
   quem a administra. A cor da barra lateral diz de quem é a vez - amarelo para
   o que espera, azul para o que já tem resposta, neutro para o que fechou. */

.ajudaBarra { flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ajudaLista { display: grid; gap: 12px; }

.sec.ajudaPedido { border-left: 4px solid var(--line); padding: 0; overflow: hidden; }
.sec.ajudaPedido.aguarda { border-left-color: var(--amarelo); }
.sec.ajudaPedido.respondido { border-left-color: var(--accent); }
.sec.ajudaPedido.resolvido { border-left-color: var(--line); opacity: .78; }

.ajudaResumo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 16px; padding: 14px 16px; cursor: pointer; list-style: none;
}
.ajudaResumo::-webkit-details-marker { display: none; }
.ajudaResumo::before {
  content: "›"; grid-column: 1; grid-row: 1; width: 18px; color: var(--muted);
  font-size: var(--txt-xl); line-height: 1; transition: transform .12s ease;
}
.ajudaPedido[open] .ajudaResumo::before { transform: rotate(90deg); }
.ajudaResumoTexto { grid-column: 1; grid-row: 1; min-width: 0; display: grid; gap: 2px; padding-left: 26px; }
.ajudaResumoTexto strong { font-size: var(--txt-md); }
.ajudaResumoTexto small { color: var(--muted); font-size: var(--txt-sm); }
.ajudaResumoEstado { grid-column: 2; grid-row: 1; display: grid; justify-items: end; gap: 3px; }
.ajudaResumoEstado small { color: var(--muted); font-size: var(--txt-xs); }

.ajudaConversa {
  display: grid; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--line); background: var(--bg);
}
.ajudaMensagem {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel);
}
/* A resposta de quem administra distingue-se da pergunta sem trocar de lado:
   numa conversa a duas vozes, alinhar mensagens à direita é convenção de
   mensageiro instantâneo e destoa de tudo o resto da plataforma. */
.ajudaMensagem.daAdministracao {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}
.ajudaMensagem header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px;
}
.ajudaMensagem header span { font-size: var(--txt-xs); }
/* O texto foi escrito numa caixa livre: as quebras de linha de quem escreveu
   são conteúdo, e colapsá-las transformava uma lista de passos num parágrafo. */
.ajudaMensagem p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ajudaContexto { margin: 0; font-size: var(--txt-xs); }

/* Anexos: escolher, ver o que está escolhido, retirar. */
.ajudaAnexos { display: grid; gap: 6px; }
.ajudaAnexosBarra { align-items: center; flex-wrap: wrap; gap: 10px; }
.ajudaAnexosLista { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ajudaAnexosLista li {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--subtle);
  font-size: var(--txt-sm);
}
.ajudaAnexoNome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ajudaEstadoEnvio { font-size: var(--txt-sm); }

/* O que já foi enviado, dentro da mensagem. As imagens veem-se aqui - é para
   isso que uma captura de ecrã serve - e abrem em tamanho real num separador
   novo; o resto é uma linha com o nome e o tamanho. */
.ajudaGaleria { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ajudaImagem {
  display: block; max-width: min(100%, 320px); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; background: var(--subtle); line-height: 0;
}
.ajudaImagem img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: contain; }
.ajudaFicheiro {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--subtle);
  font-size: var(--txt-sm); text-decoration: none; color: var(--ink);
}
.ajudaFicheiro:hover { border-color: var(--accent); }

.ajudaResposta { display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.ajudaAcoes { flex-wrap: wrap; }

.ajudaForm { display: grid; gap: 10px; }

/* As caixas de texto declaram tudo o que precisam, e não herdam nada de
   ninguém. Foi assim que este painel se defendeu de uma regra `textarea` sem
   seletor à frente que vivia em `styles/ingestion-confirmation.css` e punha
   320px de altura mínima e tipo monoespaçado em qualquer caixa da plataforma;
   a regra já lá não está, mas o que aqui se escreve é prosa e tem de parecer
   o resto da plataforma, seja qual for o estilo que passe ao lado. */
.ajudaResposta textarea,
.ajudaForm textarea,
.ajudaForm input,
.ajudaForm select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: var(--txt-sm);
}
.ajudaResposta textarea,
.ajudaForm textarea { min-height: 76px; resize: vertical; line-height: 1.45; }

/* Enquanto houver pedidos à espera, o item do menu inteiro fica vermelho - o
   número sozinho passa despercebido numa barra com nove itens. É a mesma marca
   do sino das notificações, e sai quando o número sai. */
#btnAjuda.temNaoLidas { color: var(--vermelho); font-weight: 700; }

/* 16px literais nos campos, que é o limiar abaixo do qual o Safari iOS amplia a
   página ao tocar num campo. `design.css` já tem esta regra para toda a
   aplicação, mas perde para os seletores desta folha - `.ajudaForm input` tem a
   mesma especificidade e vem depois na cascata. */
@media (max-width: 620px) {
  .ajudaResposta textarea,
  .ajudaForm textarea,
  .ajudaForm input,
  .ajudaForm select {
    font-size: 16px;
  }
}