/*
 * Painel · estilos de Suporte (Ajuda, abrir chamado, meus chamados) — pacote B1.
 * Mesmas regras do painel.css: só layout, tudo com var(--token); nada de cor escrita à mão, de @font-face ou de @import.
 * Este arquivo é só do pacote: o painel.css fica para o que é de todos.
 */

/* Atendimento e prazo (as três telas da empresa e a fila do ADM) */
.suporte-atendimento { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }
.suporte-atendimento p { margin: 0; }

/* Mensagens de resultado: sem conteúdo não ocupam espaço (a região continua avisando o leitor de tela) */
.suporte-aviso:empty { display: none; }

/* Abrir chamado */
.suporte-form { max-width: 720px; gap: var(--espaco-4); }
.suporte-form select, .suporte-form textarea, .suporte-form input { width: 100%; box-sizing: border-box; }

/* Meus chamados: lista à esquerda, conversa à direita; no celular uma sobre a outra */
.suporte-duas-colunas { display: flex; flex-wrap: wrap; gap: var(--espaco-6); align-items: flex-start; }
.suporte-coluna-lista { flex: 1 1 280px; min-width: 0; }
.suporte-conversa { flex: 999 1 520px; min-width: 0; }
.suporte-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--espaco-2); }
.suporte-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-1); padding: var(--espaco-3); border: 1px solid var(--linha); border-radius: var(--raio-2); background: var(--superficie); color: var(--texto); text-decoration: none; min-height: var(--alvo-toque); }
.suporte-item[aria-current="true"] { border: 2px solid var(--acao); background: var(--acao-suave); }
.suporte-item__apoio { font-size: 13px; line-height: 18px; color: var(--texto-2); }
.suporte-resposta { display: flex; flex-direction: column; gap: var(--espaco-3); }
.suporte-resposta textarea, .suporte-duas-caixas textarea { width: 100%; box-sizing: border-box; }

/* Conversa no portal ADM: resposta e nota interna lado a lado */
.suporte-duas-caixas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--espaco-4); }
@media (max-width: 719.98px) {
  .suporte-duas-caixas { grid-template-columns: minmax(0, 1fr); }
  .suporte-duas-colunas { gap: var(--espaco-4); }
}