/*
  Sistema visual do Hookset — espelhado da estética de referência (ennvoai.com).

  Estava tudo repetido em quatro `<style>` inline, com os mesmos hexadecimais
  copiados à mão em cada página. Aqui é um arquivo só, o navegador guarda em
  cache, e mudar a marca passa a ser mudar uma linha.

  Duas regras da identidade que não são estéticas, são de legibilidade:

  1. O violeta `#614afc` dá 3.6:1 sobre o fundo e REPROVA no WCAG AA para texto.
     Ele é cor de preenchimento e de borda. Texto e ícone em acento usam
     `--accent-soft` (#8773ff, 5.5:1). Não trocar um pelo outro.

  2. O semáforo da nota continua verde/âmbar/vermelho. A troca de marca não vale
     para semântica de dado: pintar dois dos três degraus de violeta tornaria a
     escala de 1 a 10 ilegível.
*/

:root {
  --bg:          #0b0c16;
  --surface:     #131423;
  --surface-2:   #17182d;
  --surface-3:   #25273c;
  --hover:       #1f2030;

  --line:        rgba(255, 255, 255, 0.10);
  --line-soft:   rgba(255, 255, 255, 0.08);
  --glass:       rgba(255, 255, 255, 0.03);
  --glass-2:     rgba(255, 255, 255, 0.05);

  --text:        #f8f8f8;
  --muted:       #9c9dab;

  --accent:      #614afc;   /* preenchimento e borda — nunca texto */
  --accent-soft: #8773ff;   /* texto e ícone em acento */
  --accent-deep: #4636ce;

  --ok:          #3ddc97;
  --warn:        #f0ad4e;
  --danger:      #ff5d6c;
  --info:        #58a6ff;
  --lime:        #a3e635;

  --radius:      12px;
  --radius-lg:   16px;

  --shadow-btn:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/*
  `hidden` volta a significar escondido.

  O atributo não é mágica do HTML: ele funciona por uma regra `[hidden] {
  display: none }` que vem da folha de estilo do NAVEGADOR. Qualquer `display`
  declarado aqui vence aquela regra — é precedência de origem, não
  especificidade, então nem escrever o seletor mais específico do mundo resolve.

  Na prática: toda vez que alguém escreveu `.empty-state { display: flex }` ou
  `.paywall { display: flex }`, o `elemento.hidden = true` correspondente no
  JavaScript virou um comando silenciosamente sem efeito. O sintoma era o painel
  de detalhe aparecendo embaixo do "escolha um lead", e a faixa de assinatura
  ficando visível e vazia para quem já assinou.

  O `!important` é proposital e é o idioma consagrado para isto: a regra precisa
  ganhar de declarações de autor que ainda nem foram escritas.
*/
[hidden] { display: none !important; }

/*
  Foco visível.

  Todos os campos tinham `outline: none` e nada no lugar: quem navega por
  teclado ficava sem saber onde estava. O anel usa o violeta em preenchimento,
  que é o uso correto do tom base.
*/
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Halo violeta preso à viewport. As seções não podem ter fundo opaco próprio,
   senão apagam o halo — é o que dá profundidade ao fundo. */
.halo {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(72px);
}
.halo-1 {
  top: -18rem; left: -12rem; width: 46rem; height: 46rem;
  background: radial-gradient(circle, rgba(97, 74, 252, 0.18), transparent 70%);
}
.halo-2 {
  bottom: -20rem; right: -14rem; width: 40rem; height: 40rem;
  background: radial-gradient(circle, rgba(97, 74, 252, 0.12), transparent 70%);
}

/* ── Botões ───────────────────────────────────────────────────────────────
   Os três `inset` dão o volume: luz no topo, sombra na base, anel interno. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
.btn:hover:not(:disabled) { opacity: 0.88; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent) 55%, var(--accent-deep) 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-btn);
}
.btn-secondary {
  background: var(--glass-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-danger { background: rgba(255, 93, 108, 0.15); color: var(--danger); }
.btn-ghost  { background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--text); opacity: 1; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ── Campos ───────────────────────────────────────────────────────────────
   Sem `outline: none`: o anel de foco global acima é o que sinaliza. */

.input, .select, .textarea {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 11px;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); }
.select { cursor: pointer; }
.select option { background: var(--surface-2); }
.textarea { resize: vertical; line-height: 1.5; }

/* ── Cartão de vidro ──────────────────────────────────────────────────────
   Vidro, não opaco: é o que deixa o halo aparecer por baixo. */

.card {
  background: var(--glass);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* ── Tipografia ───────────────────────────────────────────────────────────
   Título grande em peso 300 com tracking negativo: o contraste da página vem
   de escala, não de peso. É a assinatura tipográfica da referência. */

.title-xl { font-size: clamp(28px, 5vw, 42px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.1; }
.title-lg { font-size: clamp(22px, 4vw, 30px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.15; }
.title-sm { font-size: 15px; font-weight: 600; }
.muted    { color: var(--muted); }
.lead-text { color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ── A marca ──────────────────────────────────────────────────────────────
   O anzol vive embutido no HTML, não como <img>, porque o traço usa
   `currentColor`: assim a mesma marca serve o fundo escuro daqui e um fundo
   claro qualquer sem gerar arquivo novo. Só a ponta é fixa em --accent.

   Por isso o texto ao lado é branco e não violeta: o acento já está na ponta
   do anzol, e repeti-lo no nome deixaria a marca sem hierarquia. */

   O anzol ocupa 58% da altura da viewBox, então a caixa dele é desenhada a
   ~1,25× o tamanho da fonte ao lado: é o que faz o desenho bater a altura da
   caixa alta do H. Igualar as caixas deixaria a marca visivelmente baixa. */

.brand-mark {
  flex: none;
  display: block;
}

/* ── Avisos ───────────────────────────────────────────────────────────────
   Cota e assinatura são AVISO, não erro: quem esbarra ali está a um passo de
   pagar, não com defeito na conta. Vermelho ali afasta. */

.alert { border-radius: 10px; padding: 10px 13px; font-size: 13px; line-height: 1.5; }
.alert-ok   { background: rgba(97, 74, 252, 0.13);  color: var(--accent-soft); }
.alert-warn { background: rgba(240, 173, 78, 0.13); color: var(--warn); }
.alert-err  { background: rgba(255, 93, 108, 0.13); color: var(--danger); }

/* ── Modal ────────────────────────────────────────────────────────────────
   <dialog> nativo: foco preso, Escape e fundo escuro já vêm do navegador. A
   versão anterior era uma div com `position: fixed` e listener de Escape à
   mão — que não prendia o foco, então o Tab saía do modal por baixo. */

.modal {
  border: none;
  padding: 0;
  background: none;
  color: var(--text);
  /*
    `margin: auto` é o que CENTRALIZA um `<dialog>` aberto com `showModal()` —
    o navegador o posiciona com `inset: 0` e deixa a margem automática resolver
    os dois eixos. O reset lá em cima (`* { margin: 0 }`) apagava exatamente
    isso, e TODO modal do produto abria colado no canto superior esquerdo, por
    cima do conteúdo, parecendo um defeito de cada tela em vez de uma linha só.

    Repor aqui em vez de tirar o reset: `margin: 0` no `*` é o que mantém o
    resto do sistema previsível.
  */
  margin: auto;
}
.modal::backdrop { background: rgba(6, 6, 15, 0.7); backdrop-filter: blur(6px); }
.modal-box {
  width: min(400px, calc(100vw - 32px));
  /*
    Teto de altura com rolagem própria. O histórico de relatos cresce dentro
    desta caixa, e sem isto uma conta com vários relatos empurra os botões
    "Fechar" e "Enviar" para fora da tela — num `<dialog>`, que prende o foco,
    ficar sem alcançar o botão de fechar é ficar preso.
  */
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.8);
}
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Relatar problema ─────────────────────────────────────────────────────
   Fica sobre tudo e em toda tela logada. No celular vira só o ícone: o texto
   ao lado comeria metade da largura útil. */

.report-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: none;
  border-radius: 9999px;
  background: rgba(23, 24, 45, 0.92);
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 24px -8px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.report-fab:hover { color: var(--text); transform: translateY(-1px); }

/* Marca de resposta nova. É o que faz "responder dentro do produto" funcionar:
   sem ela ninguém volta ao formulário para conferir. */
.report-badge {
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
}

.report-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

/* Situação, data e — só quando o assunto está encerrado — o botão de tirar da
   lista, empurrado para a direita.

   A classe é própria, e não o `.row` genérico, porque `.row` mora no CSS das
   páginas públicas e o widget também vive no dashboard, que não carrega aquele
   arquivo: lá o `.row` não é flex nenhum e o `margin-left:auto` não empurra
   coisa alguma. */
.report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.report-head .report-remove { margin-left: auto; }
.report-item {
  padding: 10px 12px;
  background: var(--glass);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.report-msg { font-size: 12.5px; margin-top: 6px; line-height: 1.5; white-space: pre-wrap; }

/* A conversa depois da abertura.

   A borda à esquerda é o que separa o que já foi dito da mensagem que abriu o
   relato, sem precisar de um balão por turno: dentro de um modal estreito,
   bolha de chat come metade da largura em margem. */
.report-thread {
  list-style: none;
  margin-top: 10px;
  padding-left: 10px;
  border-left: 2px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.report-turn-who { font-size: 11px; color: var(--muted); }
.report-turn-body {
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 2px;
  white-space: pre-wrap;
}
/* A resposta de quem atende é a que a pessoa abriu o histórico para ler. */
.report-turn.is-admin { border-left: 2px solid var(--accent); margin-left: -12px; padding-left: 10px; }
.report-turn.is-admin .report-turn-body { color: var(--accent-soft); }

/* Abrir e Excluir na mesma célula, sem colar um no outro. */
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }

.report-answer { margin-top: 10px; }
.report-answer-box { display: flex; flex-direction: column; gap: 8px; }
.report-answer-actions { display: flex; justify-content: flex-end; }

@media (max-width: 620px) {
  .report-fab { right: 12px; bottom: 12px; padding: 10px; }
  .report-fab-text { display: none; }
}

/* Só para leitor de tela: usado nas legendas que o layout comunica por posição
   mas que sem texto ficariam mudas na navegação por voz. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}