/* R1: Ajuda e tickets; grupos do catálogo de serviços. Usa as variáveis de
   cor do styles.css, então segue a paleta escolhida. */

/* Perguntas frequentes */
.ajuda-perguntas { display: grid; gap: 8px; }
.ajuda-pergunta { border: 1px solid var(--linha); border-radius: 14px; padding: 10px 14px; background: var(--cartao); }
.ajuda-pergunta summary { cursor: pointer; font-weight: 600; color: var(--preto); font-size: 0.92rem; }
.ajuda-pergunta p { margin: 8px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--tinta); }

/* Formulário */
.tk-servico { margin-bottom: 4px; }
#form-ticket textarea, .ticket-responder textarea { width: 100%; resize: vertical; font: inherit; }

/* Meus tickets */
.tickets-lista { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.ticket-item { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; font: inherit; background: var(--cartao);
  border: 1px solid var(--linha); border-radius: 14px; padding: 10px 14px; cursor: pointer; color: var(--tinta); }
.ticket-item:hover, .ticket-item:focus-visible, .ticket-item.ativo { border-color: var(--ouro); }
.ticket-item strong { font-size: 0.9rem; color: var(--preto); overflow-wrap: anywhere; }
.ticket-item small { grid-column: 1 / -1; font-size: 0.78rem; }
.ticket-status { align-self: start; font-size: 0.74rem; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--ouro-claro); color: var(--ouro-texto); white-space: nowrap; }
.ticket-status.status-respondido { background: var(--aviso-claro); color: var(--aviso); }
.ticket-status.status-fechado { background: var(--linha); color: var(--tinta); }

/* Fio da conversa */
.ticket-fio { border-top: 1px solid var(--linha); padding-top: 14px; }
.ticket-fio-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ticket-fio-topo h3 { margin: 0; font-size: 1rem; color: var(--preto); overflow-wrap: anywhere; }
.ticket-mensagens { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 10px; }
.ticket-mensagem { border-radius: 14px; padding: 10px 14px; max-width: 92%; border: 1px solid var(--linha); background: var(--cartao); }
.ticket-mensagem.eu { justify-self: end; background: var(--ouro-claro); }
.ticket-mensagem small { display: block; font-size: 0.74rem; color: var(--tinta); margin-bottom: 4px; }
.ticket-mensagem p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.88rem; line-height: 1.5; color: var(--tinta); }

/* "Precisa de ajuda?" nas telas */
.ajuda-atalho { text-align: center; margin: 16px 0 0; font-size: 0.86rem; }

/* Grupos do catálogo (Meus serviços e catálogo público) */
.servico-grupo { border: 1px solid var(--linha); border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; }
.servico-grupo summary { cursor: pointer; font-weight: 600; color: var(--preto); font-size: 0.9rem; padding: 4px 0; }
.servico-grupo summary span { font-weight: 500; font-size: 0.78rem; color: var(--tinta); margin-left: 4px; }
.servico-grupo[open] summary { margin-bottom: 8px; }
.catalogo-grupo-titulo { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta); margin: 16px 0 8px; }