/**
 * Pague Azul Cliente - design v2: AJUDA (guias Atendimento | FAQ | Chat)
 * So o que e especifico desta tela; componentes em componentes.css. Cores so por token.
 * Doc: .claude/context/knowledge/modules/app_cliente_design_v2.md
 */

/* ==================== GUIAS ==================== */
/* Barra das guias presa logo abaixo do cabecalho */
.pa-v2 .ajuda-guias-barra {
  position: sticky;
  top: 56px;
  z-index: 40;
  margin: 0 calc(-1 * var(--v2-e5));
  padding: 0 var(--v2-e5) var(--v2-e3);
  background: var(--v2-fundo);
}
@media (max-width: 359px) {
  .pa-v2 .ajuda-guias-barra { margin: 0 calc(-1 * var(--v2-e4)); padding: 0 var(--v2-e4) var(--v2-e3); }
}
/* Cada guia ocupa a largura do proprio texto (o rotulo nunca e cortado) */
.pa-v2 .ajuda-guias > .ajuda-guia {
  flex: 1 1 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 var(--v2-e3);
  overflow: visible;
}
/* Selo de respostas nao lidas (base em menu.js): vermelho de estado + glifo legivel nos 2 temas */
.pa-v2 .ajuda-guia .badge-atendimento {
  margin-left: 0;
  flex-shrink: 0;
  background: var(--v2-erro);
  color: var(--v2-sobre-estado);
  font-weight: 600;
}
.pa-v2 .ajuda-painel[hidden] { display: none; }
.pa-v2 .ajuda-painel { padding-top: var(--v2-e2); }

/* ==================== ATENDIMENTO ==================== */
.pa-v2 .ajuda-intro .pa-titulo { margin-top: var(--v2-e3); }
.pa-v2 .ajuda-intro .pa-subtitulo { margin-bottom: var(--v2-e5); }

/* Telefone: acao principal */
.pa-v2 .ajuda-telefone { padding: var(--v2-e6) var(--v2-e5) var(--v2-e5); text-align: center; }
.pa-v2 .ajuda-telefone-icone {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--v2-e3);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v2-primaria-tint);
  color: var(--v2-primaria-forte);
}
.pa-v2 .ajuda-telefone-icone .pa-ico { width: 24px; height: 24px; }
.pa-v2 .ajuda-telefone-rotulo { margin: 0; font-size: var(--v2-t-sm); color: var(--v2-texto-suave); }
.pa-v2 .ajuda-telefone-numero {
  margin: 4px 0 var(--v2-e5);
  font-size: var(--v2-t-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-texto-forte);
  overflow-wrap: anywhere;
}
.pa-v2 .ajuda-telefone-horario { margin: var(--v2-e3) 0 0; font-size: 0.8125rem; color: var(--v2-texto-suave); }
.pa-v2 .ajuda-outros { margin-top: var(--v2-e3); }

/* Convite para o chat */
.pa-v2 .ajuda-convite { margin-top: var(--v2-e4); }
.pa-v2 .ajuda-convite .pa-item { min-height: 0; padding: var(--v2-e5) var(--v2-e5) var(--v2-e3); align-items: flex-start; }
.pa-v2 .ajuda-convite .pa-item-detalhe { font-size: var(--v2-t-sm); line-height: 1.45; }
.pa-v2 .ajuda-convite .pa-btn { margin: 0 var(--v2-e5) var(--v2-e5); width: calc(100% - 2 * var(--v2-e5)); }

/* ==================== FAQ (acordeao) ==================== */
.pa-v2 .faq-lista .faq-item + .faq-item { border-top: 1px solid var(--v2-borda); }
.pa-v2 .faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v2-e3);
  width: 100%;
  min-height: 56px;
  padding: var(--v2-e3) var(--v2-e4) var(--v2-e3) var(--v2-e5);
  border: 0;
  background: none;
  color: var(--v2-texto-forte);
  font: 500 0.9375rem/1.4 var(--v2-fonte);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pa-v2 .faq-pergunta:active { background: var(--v2-toque); }
.pa-v2 .faq-pergunta .pa-ico {
  width: 18px;
  height: 18px;
  color: var(--v2-texto-suave);
  transition: transform 0.25s var(--v2-ease);
}
.pa-v2 .faq-item.aberto .faq-pergunta .pa-ico { transform: rotate(180deg); }
.pa-v2 .faq-resposta { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--v2-ease); }
.pa-v2 .faq-item.aberto .faq-resposta { max-height: 40rem; }
.pa-v2 .faq-resposta-inner {
  padding: 0 var(--v2-e5) var(--v2-e4);
  font-size: var(--v2-t-sm);
  line-height: 1.65;
  color: var(--v2-texto-suave);
}

/* ==================== CHAT ==================== */
/* Modo chat: a pagina ocupa a altura visivel (teclado aberto incluso; o JS ajusta pelo visualViewport) */
.pa-v2 .ajuda-page.modo-chat {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pa-v2 .ajuda-page.modo-chat > .pa-cabecalho,
.pa-v2 .ajuda-page.modo-chat > .ajuda-guias-barra { flex: none; }
.pa-v2 .ajuda-page.modo-chat .ajuda-intro,
.pa-v2 .ajuda-page.modo-chat #footer-nav { display: none; }
.pa-v2 .ajuda-page.modo-chat .ajuda-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 calc(-1 * var(--v2-e5));
}
@media (max-width: 359px) {
  .pa-v2 .ajuda-page.modo-chat .ajuda-content { margin: 0 calc(-1 * var(--v2-e4)); }
}
.pa-v2 .chat {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 0;
  border-top: 1px solid var(--v2-borda);
}
.pa-v2 .chat-mensagens {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--v2-e3) var(--v2-e4) var(--v2-e4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Vazio / carregando / erro / login */
.pa-v2 .chat-centro {
  margin: auto;
  max-width: 300px;
  padding: var(--v2-e6) var(--v2-e5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pa-v2 .chat-centro-icone {
  width: 56px;
  height: 56px;
  margin-bottom: var(--v2-e4);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v2-neutro);
  color: var(--v2-texto-suave);
}
.pa-v2 .chat-centro-icone .pa-ico { width: 26px; height: 26px; }
.pa-v2 .chat-centro-texto { margin: 0; font-size: var(--v2-t-sm); line-height: 1.55; color: var(--v2-texto-suave); }
.pa-v2 .chat-centro .pa-btn { margin-top: var(--v2-e5); }
.pa-v2 .chat-centro p { margin: var(--v2-e3) 0 0; font-size: var(--v2-t-sm); color: var(--v2-texto-suave); }
.pa-v2 .chat-centro p a { color: var(--v2-primaria-forte); font-weight: 600; text-decoration: none; }

/* Separador de dia */
.pa-v2 .chat-dia {
  align-self: center;
  margin: var(--v2-e4) 0 var(--v2-e2);
  padding: 4px 12px;
  border-radius: var(--v2-r-pill);
  background: var(--v2-neutro);
  color: var(--v2-texto-suave);
  font-size: var(--v2-t-xs);
  font-weight: 600;
}
.pa-v2 .chat-mensagens > .chat-dia:first-child { margin-top: var(--v2-e1); }

/* Baloes */
.pa-v2 .chat-linha { display: flex; }
.pa-v2 .chat-linha.is-primeira { margin-top: var(--v2-e2); }
.pa-v2 .chat-dia + .chat-linha { margin-top: 0; }
.pa-v2 .chat-linha.cliente { justify-content: flex-end; }
.pa-v2 .chat-balao {
  max-width: 80%;
  padding: 8px 12px 6px;
  border-radius: 18px;
  background: var(--v2-superficie);
  border: 1px solid var(--v2-borda);
  color: var(--v2-texto-forte);
}
.pa-v2 .chat-linha.atendente .chat-balao { border-bottom-left-radius: 6px; }
.pa-v2 .chat-linha.cliente .chat-balao {
  background: var(--v2-primaria);
  border-color: transparent;
  color: var(--v2-sobre-primaria);
  border-bottom-right-radius: 6px;
}
.pa-v2 .chat-autor {
  margin-bottom: 2px;
  font-size: var(--v2-t-xs);
  font-weight: 600;
  color: var(--v2-primaria-forte);
}
.pa-v2 .chat-texto {
  font-size: 0.9375rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pa-v2 .chat-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--v2-texto-suave);
}
.pa-v2 .chat-meta .pa-ico { width: 13px; height: 13px; stroke-width: 2.25; }
.pa-v2 .chat-linha.cliente .chat-meta { color: var(--v2-sobre-primaria); }

/* Mensagem que falhou: balao de erro (o texto continua legivel) */
.pa-v2 .chat-linha.is-falha .chat-balao {
  background: var(--v2-erro-tint);
  border-color: var(--v2-erro);
  color: var(--v2-texto-forte);
}
.pa-v2 .chat-linha.is-falha .chat-meta { flex-wrap: wrap; color: var(--v2-erro-texto); font-weight: 500; }
.pa-v2 .chat-tentar {
  min-height: 32px;
  padding: 4px 0 4px 6px;
  border: 0;
  background: none;
  color: var(--v2-erro-texto);
  font: 600 var(--v2-t-xs)/1 var(--v2-fonte);
  text-decoration: underline;
  cursor: pointer;
}

/* Conversa encerrada */
.pa-v2 .chat-encerrado {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-e2);
  margin: 0 var(--v2-e4) var(--v2-e2);
  padding: 10px var(--v2-e4);
  border-radius: var(--v2-r-sm);
  background: var(--v2-alerta-tint);
  color: var(--v2-texto);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
}
.pa-v2 .chat-encerrado .pa-ico { width: 16px; height: 16px; color: var(--v2-alerta-texto); }
.pa-v2 .chat-encerrado[hidden],
.pa-v2 .chat-composer[hidden],
.pa-v2 .chat-contador[hidden] { display: none; }

/* Campo de mensagem fixo no rodape */
.pa-v2 .chat-composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: var(--v2-e2);
  padding: var(--v2-e2) var(--v2-e3);
  padding-bottom: calc(var(--v2-e2) + env(safe-area-inset-bottom, 0px));
  background: var(--v2-barra);
  border-top: 1px solid var(--v2-borda);
}
.pa-v2 .chat-campo {
  flex: 1;
  min-width: 0;
  padding: 10px 16px 8px;
  border: 1px solid var(--v2-campo-borda);
  border-radius: 22px;
  background: var(--v2-campo);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pa-v2 .chat-campo:focus-within { border-color: var(--v2-primaria); box-shadow: 0 0 0 3px var(--v2-primaria-tint); }
.pa-v2 .chat-campo textarea {
  display: block;
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--v2-texto-forte);
  font: 400 1rem/22px var(--v2-fonte);
  max-height: 110px;
  overflow-y: auto;
}
.pa-v2 .chat-campo textarea::placeholder { color: var(--v2-texto-suave); opacity: 1; }
.pa-v2 .chat-contador { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--v2-texto-suave); }
.pa-v2 .chat-contador.no-limite { color: var(--v2-erro-texto); font-weight: 600; }
.pa-v2 .chat-enviar {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--v2-primaria);
  color: var(--v2-sobre-primaria);
  cursor: pointer;
  transition: transform 0.15s var(--v2-ease), opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.pa-v2 .chat-enviar .pa-ico { width: 20px; height: 20px; margin-left: -2px; }
.pa-v2 .chat-enviar:active { transform: scale(0.94); }
.pa-v2 .chat-enviar:disabled { background: var(--v2-neutro); color: var(--v2-texto-suave); cursor: default; transform: none; }

/* main.css da padding-bottom de 116px a todo main[class$="-content"]: aqui o respiro da barra ja vem da .pa-pagina */
.pa-v2 .ajuda-content { padding: 0; }