/*
 * JANELA — Reportar um problema (26/08, corrigida após reprovação)
 *
 * O `.rep` não é React: é um popup vanilla que o próprio `reportar/index.js`
 * cria e anexa ao `body` (canto inferior direito, na tela sem o kit). O kit só
 * remapeia posição/tamanho pelo `.rpgw-conteudo`; tudo que é COR, BORDA e
 * ESPAÇAMENTO continua vindo de `www/reportar/styles.css` (o tema antigo) até
 * esta folha sobrescrever — e por isso quase toda propriedade aqui repete algo
 * que já existia lá, só que em `--rpg-un` e na paleta certa.
 *
 * Estrutura real do DOM (ver CONTRATO.md antes de mexer):
 *   .rep.rpgw-conteudo
 *     .rep__topo   > strong (pergunta) + .rep__x  — ESCONDIDO, ver abaixo
 *     .rep__dica   (parágrafo de ajuda — a única prosa longa desta janela)
 *     .rep__texto  (textarea, é o assunto da tela — cresce para ocupar o vão)
 *     .rep__pe     > .rep__aviso (mensagem) + .rep__enviar (o único botão, dourado)
 *
 * 🚨 O X do kit (`.rpgw__x`) SOZINHO NÃO FECHA esta janela: como `.rep` é
 * `presenca:true`, o `atualizar()` do kit reabre a janela ~400ms depois porque
 * o nó `.rep` continua no DOM (só `data-fechar` o remove de verdade). Por isso
 * `reportar.js` passa `aoFechar` chamando `window.__reportar.fechar()` — e por
 * isso `.rep__topo` inteiro pode sumir: o cabeçalho (ícone + título) e o
 * fechamento já vêm do quadro do kit, então o bloco interno virou o MESMO
 * título repetido 70px abaixo do primeiro. Removido — a dica passa a ser a
 * primeira linha visível, como texto de apoio do título do kit.
 *
 * 🚨 `display: flex` só pega com `!important`. O kit aplica
 * `html[data-rpgw] .rpgw-conteudo { display: block !important }`
 * (janela.css:577) na MESMA especificidade que `html[data-rpgw='reportar']
 * .rep` — sem `!important` aqui a regra do kit vence sempre, `flex-direction`
 * e `gap` são calculados e ignorados, e nada cresce. Foi assim que sobrou 1/3
 * da janela em preto liso: o textarea nunca recebia o `flex: 1 1 auto`.
 */

html[data-rpgw='reportar'] .rep {
  display: flex !important;
  flex-direction: column;
  gap: calc(14px * var(--rpg-un, 1));
  padding: calc(18px * var(--rpg-un, 1));
  /* Piso do tamanho de fonte da caixa: sem isto o `13px` cru do tema antigo
     sobrevive para qualquer filho que esqueça o próprio font-size. */
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
}

/*
 * O cabeçalho interno (ícone + "Achou um problema?") duplicava o título do
 * quadro do kit uma régua abaixo — e o ícone dele (Icon_64_Report em 22 de
 * lado) virava um borrão branco chapado no celular. O quadro já tem ícone e
 * título; aqui dentro sobra só o assunto.
 */
html[data-rpgw='reportar'] .rep__topo {
  display: none !important;
}

/*
 * ── dica de preenchimento — a única prosa longa da tela ──────────────
 * Piso no clamp: em 844×390 (`--rpg-un` ~0,41) o tamanho normal cairia bem
 * abaixo de 6 unidades de tela, ilegível. `clamp()` com o mínimo em unidade
 * crua é o padrão já usado em `habilidades.css` para isto — o inspetor
 * aceita porque a linha inteira contém um `calc(...var(--rpg-un))`.
 */
html[data-rpgw='reportar'] .rep__dica {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(12px, calc(14px * var(--rpg-un, 1)), 15px);
  line-height: 1.5;
  color: var(--rpg-tinta-2);
  -webkit-text-stroke: calc(1px * var(--rpg-un, 1)) #0c1a2e;
  paint-order: stroke fill;
}

/* ── o campo — é o assunto da tela, por isso cresce e ocupa o vão ──────
   Poço escuro, como `.rpg-caixa`: o textarea vira a superfície onde o
   jogador escreve, não uma caixinha de sistema operacional. */

/* 🚨 COM A JANELA ENCOLHENDO, `flex:1` NO TEXTAREA VIRA O PROBLEMA. Ele puxava
   toda a folga para si e a janela abria do tamanho do palco para um formulário
   de três linhas — meia tela de campo vazio. Aqui ele tem uma altura de
   trabalho generosa (cinco linhas) e é o QUADRO que se ajusta a ele. Quem
   escrever mais do que isso rola dentro do campo, como em qualquer formulário. */
html[data-rpgw='reportar'] .rep__texto {
  flex: 0 0 auto;
  height: calc(150px * var(--rpg-un, 1));
  min-height: calc(90px * var(--rpg-un, 1));
  width: 100%;
  box-sizing: border-box;
  padding: calc(14px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid #ffffff14;
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #08131f 0%, #050b14 100%);
  box-shadow: inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008;
  color: var(--rpg-tinta);
  font-family: inherit;
  font-size: clamp(9px, calc(13px * var(--rpg-un, 1)), 17px);
  line-height: 1.5;
  resize: none;
  outline: none;
  transition: box-shadow 0.15s ease;
}
html[data-rpgw='reportar'] .rep__texto::placeholder {
  color: var(--rpg-tinta-3);
}
/* O aro aceso substitui o azul de foco do sistema — é o mesmo sinal que o
   resto do jogo usa para "isto está com a atenção". */
html[data-rpgw='reportar'] .rep__texto:focus {
  border-color: var(--rpg-aro);
  box-shadow: inset 0 calc(2px * var(--rpg-un, 1)) calc(6px * var(--rpg-un, 1)) #0008,
    0 0 0 calc(2px * var(--rpg-un, 1)) #4c7ba655;
}
/* Rolagem fina do jogo para quando o relato enche o campo (estado "cheio") —
   a barra branca do sistema destoaria do resto da janela. */
html[data-rpgw='reportar'] .rep__texto {
  scrollbar-width: thin;
  scrollbar-color: #2f5a80 #050b14;
}
html[data-rpgw='reportar'] .rep__texto::-webkit-scrollbar {
  width: calc(8px * var(--rpg-un, 1));
}
html[data-rpgw='reportar'] .rep__texto::-webkit-scrollbar-track {
  background: #050b14;
  border-radius: 999px;
}
html[data-rpgw='reportar'] .rep__texto::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3f74a0, #23486b);
  border-radius: 999px;
}

/* ── rodapé: aviso + o único botão dourado da tela ─────────────────── */

html[data-rpgw='reportar'] .rep__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--rpg-un, 1));
  flex: 0 0 auto;
}

/*
 * Alinhado à direita, colado no botão que ele comenta: com `space-between`
 * a mensagem morava no canto oposto do botão — quem lê "Escreva um pouco
 * mais." tinha que atravessar a janela inteira para achar o Enviar.
 * `flex:1` ainda deixa a faixa clicável larga, mas o texto agora nasce
 * colado nele.
 */
html[data-rpgw='reportar'] .rep__aviso {
  flex: 1 1 auto;
  min-height: calc(16px * var(--rpg-un, 1));
  text-align: right;
  font-size: clamp(11px, calc(13px * var(--rpg-un, 1)), 14px);
  font-weight: 700;
  line-height: 1.3;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #0a1220;
  paint-order: stroke fill;
}
/* Sucesso é verde; "faltou preencher" e "não deu para enviar" são a MESMA
   cor (âmbar) — nunca vermelho: quem está reportando um bug já está
   frustrado, a caixa não precisa parecer estar brigando de volta. */
html[data-rpgw='reportar'] .rep__aviso[data-bom='1'] {
  color: var(--rpg-bom);
}
html[data-rpgw='reportar'] .rep__aviso[data-bom='0'] {
  color: var(--rpg-ambar);
}

html[data-rpgw='reportar'] .rep__enviar {
  flex: 0 0 auto;
  min-height: calc(38px * var(--rpg-un, 1));
  padding: 0 calc(24px * var(--rpg-un, 1));
  border: calc(1px * var(--rpg-un, 1)) solid var(--rpg-aro-ouro);
  border-radius: var(--rpg-raio-p);
  background: linear-gradient(180deg, #ffb03a 0%, #b4661a 100%);
  box-shadow: inset 0 calc(1px * var(--rpg-un, 1)) 0 #ffe1a8,
    0 calc(2px * var(--rpg-un, 1)) calc(5px * var(--rpg-un, 1)) #0008;
  color: #2a1200;
  font-family: inherit;
  font-size: clamp(13px, calc(16px * var(--rpg-un, 1)), 17px);
  font-weight: 700;
  -webkit-text-stroke: calc(1.2px * var(--rpg-un, 1)) #ffd58a;
  paint-order: stroke fill;
  cursor: pointer;
  transition: filter 0.12s ease, translate 0.08s ease;
}
html[data-rpgw='reportar'] .rep__enviar:hover:not(:disabled) {
  filter: brightness(1.14);
}
html[data-rpgw='reportar'] .rep__enviar:active:not(:disabled) {
  translate: 0 calc(1px * var(--rpg-un, 1));
  filter: brightness(0.94);
}
/* "Enviando…"/"Enviado" (disabled) trocam de PALETA, não ficam com o dourado
   desaturado por filtro — o mesmo idioma que `.shop-pacote__btn:disabled` e
   `#buffbau .bb__btn:disabled` já usam em loja.css. Grayscale+brightness
   sobre o gradiente dourado dava um cinza chapado com "Enviado" em marrom
   escuro sobre cinza médio: baixo contraste e cara de botão do Windows. */
html[data-rpgw='reportar'] .rep__enviar:disabled {
  border-color: #2f5a80;
  background: linear-gradient(180deg, #12233f 0%, #0a1526 100%);
  box-shadow: none;
  color: var(--rpg-tinta-3);
  -webkit-text-stroke: 0 #0a1220;
  cursor: not-allowed;
}

/* ── pouca altura (celular deitado): dica mais enxuta, mesma estrutura ── */

@media (max-height: 420px) {
  html[data-rpgw='reportar'] .rep {
    gap: calc(10px * var(--rpg-un, 1));
    padding: calc(14px * var(--rpg-un, 1));
  }
  html[data-rpgw='reportar'] .rep__texto {
    min-height: calc(60px * var(--rpg-un, 1));
  }
}