/* O botão "Ajuda" e o painel do assistente: `pecas` em src/portal/ui/ajuda.py.

   Escrito à mão, e não em classe do Tailwind, pelo motivo da janela
   (34-janela.css) e da câmera do ponto (32-ponto-selfie.css): o CSS do
   Tailwind não é versionado e só existe depois do `npm run css` ou dentro da
   imagem. Sem ele o botão deixaria de ser fixo e cairia no fim da página.
   As cores são as da marca (estilos/entrada.css): azul #1F3B6E e #182F58,
   dourado #D9A85B, a borda #E5E7EB e o fundo #F5F6F7.

   O desenho do botão é o robô atendente (ajuda-robo.svg, desenho próprio do
   projeto, pedido do dono em 01/10/2026). No computador, o robô e a palavra
   "Ajuda"; no celular, só o robô, num círculo. Canto de baixo à direita nos
   dois tamanhos, sempre opaco, com sombra suave.

   Empilhamento, do fundo para a frente: o botão 30 e o painel aberto 35; o
   menu dos seletores e o véu do menu do celular 40; a sidebar do celular e
   os avisos que somem sozinhos 50; a janela 90; o véu de carregamento 100.
   A ajuda fica ABAIXO de tudo o que já existia: o menu do celular cobre o
   painel, e uma janela aberta cobre os dois. O aviso de "gravado" não passa
   mais por cima do botão: com a ajuda na tela ele aparece ACIMA do botão
   (ver "Os avisos", adiante), e o "Enviando" do ponto, que fica acima do véu
   (105), também. A única exceção do empilhamento é ENQUANTO o
   assistente responde: o botão e o painel sobem para cima do véu (ver o fim
   do arquivo). */

/* As medidas do botão, num lugar só. Delas saem a posição do painel, a folga
   do fim da página e a altura em que os avisos aparecem: mudou o botão,
   muda tudo junto. No celular elas trocam (fim do arquivo). */
:root {
  --ajuda-margem: 16px; /* do botão até a borda da tela */
  --ajuda-botao: 54px; /* a altura do botão: o robô de 44 e 5 de cada lado */
}

.ajuda {
  position: fixed;
  right: var(--ajuda-margem);
  bottom: var(--ajuda-margem);
  z-index: 30;
  font-family: Inter, system-ui, "Segoe UI", sans-serif;
}

.ajuda[open] {
  z-index: 35;
}

/* O botão: 54 px de altura no computador e um círculo de 60 no celular,
   acima do mínimo de toque do portal (44, em ui/tokens.py). Opaco: nada da
   página aparece através dele. `vertical-align: top`: alinhado pela linha de
   base, o botão ganhava 1 px de linha por baixo e subia 1 px do canto. */
.ajuda-botao {
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  gap: 8px;
  height: var(--ajuda-botao);
  padding: 0 20px 0 5px;
  border-radius: 9999px;
  background: #1f3b6e;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
  opacity: 1;
  box-shadow: 0 6px 16px rgba(12, 26, 51, 0.28);
  transition: background-color 150ms ease-out, transform 200ms ease-out;
}

.ajuda-botao::-webkit-details-marker {
  display: none;
}

.ajuda-botao:hover {
  background: #182f58;
}

.ajuda-botao:active {
  transform: scale(0.97);
}

/* O foco pelo teclado, no dourado da marca: sobre o azul, o contorno padrão
   do navegador quase não aparece. */
.ajuda-botao:focus-visible,
.ajuda-fechar:focus-visible,
.ajuda-enviar:focus-visible {
  outline: 3px solid #d9a85b;
  outline-offset: 2px;
}

/* O robô, no botão. O desenho já traz o próprio fundo (o balão branco). */
.ajuda-botao-robo {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
}

/* No celular o botão é só o robô, num círculo de 60 x 60: por extenso ele
   ficava por cima da seta do seletor e da borda dos campos que rolam por
   baixo. A palavra sai da vista e continua na página; o nome do botão para o
   leitor de tela é o `aria-label` dele, que não depende do tamanho. */
@media (max-width: 639px) {
  .ajuda-botao {
    justify-content: center;
    width: var(--ajuda-botao);
    padding: 0;
  }

  .ajuda-botao-robo {
    width: 50px;
    height: 50px;
  }

  .ajuda-botao-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* O botão some enquanto a pessoa rola a tela para baixo, e volta quando ela
   para de rolar ou rola para cima: quem liga e desliga a classe é o
   58-ajuda.js. Ele sai deslizando para fora da tela, sempre opaco. Nunca com
   o painel aberto (`:not([open])`); com o foco do teclado nele, o JavaScript
   nem chega a pôr a classe (o foco que o clique ou o toque deixam no botão
   não conta). Recolhido, ele não segura o toque: o que está
   por baixo recebe o clique. Quem se move é o botão, e não a caixa: uma
   transformação na caixa prenderia o painel, que é de posição fixa. */
.ajuda-recolhida:not([open]) {
  pointer-events: none;
}

.ajuda-recolhida:not([open]) > .ajuda-botao {
  transform: translateY(calc(100% + var(--ajuda-margem) + 24px));
}

/* Quem pediu menos movimento ao sistema não vê o botão deslizar nem encolher
   no toque: ele some e volta no lugar, de uma vez. */
@media (prefers-reduced-motion: reduce) {
  .ajuda-botao {
    transition: none;
  }

  .ajuda-botao:active {
    transform: none;
  }

  .ajuda-recolhida:not([open]) > .ajuda-botao {
    transform: none;
    opacity: 0;
  }
}

/* O painel: acima do botão, que continua à vista para fechar.

   Limitação conhecida, anotada na revisão de 01/10/2026: no celular DEITADO
   (740 x 360, por exemplo, que tem largura de computador) sobram 254 px para
   o painel e 64 px para a conversa, umas duas linhas de resposta. Dar a
   altura toda ao painel ali rende só 16 px, porque quem ocupa a tela é o
   botão embaixo dele. Resolver de verdade é mudar o desenho na tela baixa
   (o painel ao lado do botão, ou por cima dele), e isso é decisão do dono. */
.ajuda-painel {
  position: fixed;
  right: var(--ajuda-margem);
  bottom: calc(var(--ajuda-margem) + var(--ajuda-botao) + 12px);
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - var(--ajuda-margem) - var(--ajuda-botao) - 36px);
  max-height: calc(100dvh - var(--ajuda-margem) - var(--ajuda-botao) - 36px);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(12, 26, 51, 0.22);
}

.ajuda-topo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  background: #0c1a33;
  color: #ffffff;
}

/* O robô e, ao lado, o título com o subtítulo. */
.ajuda-topo-nome {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.ajuda-topo-robo {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.ajuda-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.ajuda-subtitulo {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
}

.ajuda-fechar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.ajuda-fechar:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ajuda-fechar-icone {
  width: 20px;
  height: 20px;
}

/* O aviso que fica sempre à vista: no amarelo dos alertas do portal. */
.ajuda-aviso {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.ajuda-aviso-icone {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Quem rola é o meio: o topo, o aviso, o campo e o contador ficam parados. */
.ajuda-rolagem {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
  background: #f5f6f7;
  overflow-wrap: anywhere;
}

.ajuda-boas-vindas {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}

.ajuda-mensagens {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ajuda-fala {
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.ajuda-fala-quem {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

/* As quebras de linha dos passos numerados vêm do texto: sem isto, os passos
   sairiam num parágrafo só. */
.ajuda-fala-texto {
  white-space: pre-line;
}

.ajuda-fala-pessoa {
  align-self: flex-end;
  background: #1f3b6e;
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

/* A pergunta que acabou de sair e ainda espera a resposta: o mesmo balão,
   logo abaixo da conversa. Vazio, o bloco não ocupa espaço. */
.ajuda-pendentes:not(:empty) {
  margin-top: 10px;
}

.ajuda-fala-pendente {
  opacity: 0.85;
}

.ajuda-fala-assistente {
  align-self: flex-start;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1f2937;
  border-bottom-left-radius: 4px;
}

/* Fora do escopo, limite do dia e indisponível: a frase fixa, no amarelo. */
.ajuda-fala-aviso {
  border-color: #fde68a;
  background: #fffbeb;
  color: #78350f;
}

/* "Respondendo", com os três pontos. Escondido até o callback acender. */
.ajuda-estado {
  display: none;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #182f58;
}

.ajuda-estado.ajuda-respondendo {
  display: block;
}

.ajuda-pontos::after {
  content: "";
  animation: ajuda-pontos 1.2s steps(1, end) infinite;
}

@keyframes ajuda-pontos {
  0% {
    content: ".";
  }
  33% {
    content: "..";
  }
  66% {
    content: "...";
  }
}

/* O grupo do campo e do botão. É um <fieldset> para desligar os dois de uma
   vez enquanto o assistente responde; aqui ele perde a moldura do navegador. */
.ajuda-campos {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ajuda-entrada {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 8px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

/* O rótulo existe para o leitor de tela; o campo já diz o que pede. */
.ajuda-rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* O campo é o campo do portal: a altura (38 px no computador, 44 no celular),
   a borda, o foco e a letra vêm de 12-formulario.css e de 10-marca.css, que
   valem para todo `dcc.Input`. O Dash 4.4 põe a classe no invólucro
   (`div.dash-input-container`) e deixa o <input> por dentro. Aqui só o que é
   deste painel: ocupar a largura que sobra e o recuo do texto. */
.ajuda-campo {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.ajuda-campo > .dash-input-element {
  width: 100%;
  padding: 0 0.75rem;
}

/* O botão acompanha a altura do campo ao lado, como a classe `botao` das
   telas: 44 px no celular e 38 do `sm` para cima. */
.ajuda-enviar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  background: #1f3b6e;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

@media (min-width: 640px) {
  .ajuda-enviar {
    height: 2.375rem;
  }
}

.ajuda-enviar:hover {
  background: #182f58;
}

.ajuda-enviar:disabled {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
}

/* O campo desligado (respondendo, ou perguntas do dia esgotadas). */
.ajuda-campo > .dash-input-element:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.ajuda-enviar-icone {
  width: 16px;
  height: 16px;
}

.ajuda-contador {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 16px 10px;
  background: #ffffff;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
}

/* A folga no fim da página. A área que rola (o <main>, que leva `com-ajuda`
   só com o assistente ligado: ui/layout.py) ganha espaço no fim, da altura
   do botão e mais um respiro: o último campo ou botão de qualquer tela
   (Enviar para aprovação, Registrar ocorrência) pode ser rolado para CIMA do
   botão de ajuda, e nada fica escondido atrás dele. */
.com-ajuda {
  padding-bottom: calc(var(--ajuda-margem) + var(--ajuda-botao) + 16px);
}

/* Os avisos. A confirmação que aparece no canto de baixo à direita depois de
   gravar (`c.aviso_flutuante`, das telas da gestão, e o aviso das telas do
   colaborador, em 52-colaborador.css) nascia no lugar do botão e ficava por
   cima dele. Com a ajuda na tela ela surge ACIMA do botão, com 12 px de
   respiro: nem por cima, nem por baixo. Sem a ajuda (assistente desligado, o
   <main> não leva `com-ajuda`) o aviso fica onde sempre esteve.

   A margem zerada: o aviso é o primeiro bloco do corpo da página, e o
   espaçamento entre blocos (`space-y-5`, em ui/tokens.py) dá a ele 20 px de
   margem embaixo, que o levantariam mais 20 px sem ninguém ter pedido.

   A sombra é mais curta que a de sempre: ela termina dentro dos 12 px do
   respiro, e nem a sombra do aviso encosta no botão. */
.com-ajuda .aviso-flutuante,
.com-ajuda .aviso-colaborador {
  bottom: calc(var(--ajuda-margem) + var(--ajuda-botao) + 12px);
  margin-bottom: 0;
  box-shadow: 0 2px 10px rgba(12, 26, 51, 0.16);
}

/* O aviso do colaborador saía deslizando para baixo, e agora passaria por
   cima do botão. Aqui ele desce só até a própria borda de baixo, como quem
   entra numa fresta: o recorte o corta nessa linha, e ele continua opaco até
   o fim. O recorte de baixo começa nos 12 px do respiro, onde a sombra já
   acabou: parado, o aviso não mostra corte nenhum. */
@keyframes aviso-colaborador-recolher {
  0%,
  85% {
    transform: translateY(0);
    clip-path: inset(-2rem -2rem -12px -2rem);
    visibility: visible;
  }
  100% {
    transform: translateY(100%);
    clip-path: inset(-2rem -2rem 100% -2rem);
    visibility: hidden;
  }
}

.com-ajuda .aviso-colaborador {
  animation-name: aviso-colaborador-recolher;
}

/* Enquanto o aviso do colaborador existe, o fim da página sobe acima dele
   (é a regra de 52-colaborador.css, somada à altura em que ele está agora). */
.com-ajuda:has(.aviso-colaborador) {
  padding-bottom: calc(var(--ajuda-margem) + var(--ajuda-botao) + 12px + 6rem);
}

/* O "Enviando" do ponto, no Meu Dia (`aviso_enviando`, em ui/ponto.py, com o
   visual em 32-ponto-selfie.css). Não é confirmação: é o aviso que fica na
   tela quando o envio da marcação não volta (rede caída, sessão vencida), e
   é justo aí que a pessoa precisa da ajuda. Ele vai de lado a lado no pé da
   tela, acima do véu (105), e cobria o botão inteiro no celular. Com a ajuda
   na tela ele sobe para a mesma altura dos outros avisos; sem a ajuda, fica
   onde sempre esteve. */
.com-ajuda .ponto-enviando {
  bottom: calc(var(--ajuda-margem) + var(--ajuda-botao) + 12px);
}

/* Com o painel ABERTO no computador, o aviso vai para o lado do painel, em
   vez de cobrir o campo da conversa. Abaixo de 768 px não cabem os dois lado
   a lado, e o aviso fica por cima do painel pelos segundos dele. */
@media (min-width: 768px) {
  body:has(.ajuda[open]) .com-ajuda .aviso-flutuante,
  body:has(.ajuda[open]) .com-ajuda .aviso-colaborador,
  body:has(.ajuda[open]) .com-ajuda .ponto-enviando {
    right: calc(var(--ajuda-margem) + 380px + 12px);
  }
}

/* Enquanto o assistente responde, a ajuda (o botão e o painel) sobe para cima
   do véu de carregamento, e com o painel ABERTO o véu fica transparente: a
   pessoa lê o "Respondendo", e o X, o Esc e o próprio botão "Ajuda" fecham e
   reabrem o painel. O campo e o "Enviar" já estão desligados pelo callback,
   que é o que evita o envio em dobro.

   O véu continua segurando o clique no RESTO da tela, e é de propósito: ele
   é a proteção contra o clique repetido que vale para toda ação do portal
   (20-carregando.css). Deixá-lo passar o clique abriria, durante a espera da
   ajuda, o botão "Registrar entrada" e todos os outros para dois cliques
   seguidos. Com o painel fechado, o véu aparece com o "Carregando" de
   sempre: a tela diz por que o toque não pega, pelos poucos segundos que
   faltam.

   Em navegador sem `:has()`, o véu aparece como em qualquer outra ação, e
   nada quebra. */
body:has(.ajuda[open] .ajuda-respondendo) ._dash-loading-callback {
  animation: none;
  opacity: 0;
}

body:has(.ajuda-respondendo) .ajuda {
  z-index: 101;
}

/* No celular o botão é o círculo de 60 px, a 12 px da borda, e o painel
   ocupa a largura toda e quase a altura toda: sobra o botão embaixo. */
@media (max-width: 639px) {
  :root {
    --ajuda-margem: 12px;
    --ajuda-botao: 60px;
  }

  .ajuda-painel {
    left: 8px;
    right: 8px;
    bottom: calc(var(--ajuda-margem) + var(--ajuda-botao) + 8px);
    width: auto;
    max-width: none;
    height: auto;
    top: 8px;
    max-height: none;
  }
}

/* Na impressão (o RA em tela, um relatório) a ajuda não sai. */
@media print {
  .ajuda {
    display: none;
  }
}