/* Modais do site PUBLICO (wikiConfirm, wikiAlert, "quem reagiu").
 *
 * POR QUE ESTE ARQUIVO EXISTE: as classes .we-dialog viviam SO no
 * wiki-editor.css, que e carregado apenas no layout do ADMIN. No publico o
 * wiki-dialog.js rodava sem estilo nenhum, e o modal aparecia como um bloco
 * solto no fim da pagina (foi assim que o modal de reacoes "bugou").
 * Aqui as variaveis sao proprias de proposito — nao dependem do editor.
 */
:root {
  --wd-bg: #ffffff;
  --wd-border: #e2e8f0;
  --wd-text: #0f172a;
  --wd-text-soft: #475569;
  --wd-accent: #2563eb;
  --wd-accent-soft: #eff6ff;
  --wd-danger: #e11d48;
  --wd-danger-soft: #fff1f2;
  --wd-hover: #f1f5f9;
}
html.dark {
  --wd-bg: #0f172a;
  --wd-border: #1e293b;
  --wd-text: #f1f5f9;
  --wd-text-soft: #cbd5e1;
  --wd-accent: #60a5fa;
  --wd-accent-soft: rgba(30, 58, 138, 0.35);
  --wd-danger: #fb7185;
  --wd-danger-soft: rgba(136, 19, 55, 0.35);
  --wd-hover: #1e293b;
}

/* Trava o scroll da pagina enquanto um modal esta aberto.
 * `position: fixed` no body (em vez de so overflow:hidden) porque no iOS o
 * overflow sozinho nao segura o scroll. O `top` negativo preserva a posicao,
 * e o JS restaura no fechamento. */
body.wd-locked {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.we-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: wdFadeIn .15s ease;
  transition: opacity .15s ease;
  /* O backdrop tambem rola, pra tela baixa nao prender o dialogo. */
  overflow-y: auto;
}
@keyframes wdFadeIn { from { opacity: 0; } to { opacity: 1; } }

.we-dialog {
  background: var(--wd-bg);
  border: 1px solid var(--wd-border);
  border-radius: 12px;
  box-shadow: 0 24px 60px -16px rgba(15, 23, 42, .32);
  width: 100%;
  max-width: 420px;
  /* Card no meio da tela que NUNCA passa da altura da janela: o que estoura
     vai pro scroll do corpo, nao pro da pagina. */
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  margin: auto;
  overflow: hidden;
  animation: wdPop .18s cubic-bezier(.2, .8, .3, 1.05);
}
html.dark .we-dialog { box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6); }
@keyframes wdPop {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.we-dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 0;
  flex-shrink: 0;
}
.we-dialog-icon {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wd-accent-soft);
  color: var(--wd-accent);
  flex-shrink: 0;
}
.we-dialog-icon svg { width: 18px; height: 18px; }
.we-dialog.we-dialog-danger .we-dialog-icon {
  background: var(--wd-danger-soft);
  color: var(--wd-danger);
}
.we-dialog-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--wd-text);
  line-height: 1.3;
}

/* O corpo e quem rola. flex:1 + min-height:0 e o par que faz overflow
   funcionar dentro de um flex container — sem o min-height, o corpo cresce
   e empurra o rodape pra fora da tela. */
.we-dialog-body {
  padding: 8px 20px 16px;
  font-size: 13px;
  color: var(--wd-text-soft);
  line-height: 1.55;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.we-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--wd-border);
  flex-shrink: 0;
}
.we-dialog-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--wd-border);
  background: transparent;
  color: var(--wd-text-soft);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.we-dialog-btn:hover { background: var(--wd-hover); color: var(--wd-text); }
.we-dialog-btn-primary {
  background: var(--wd-accent);
  border-color: var(--wd-accent);
  color: #fff;
}
.we-dialog-btn-primary:hover { filter: brightness(1.08); background: var(--wd-accent); color: #fff; }
.we-dialog-btn-danger {
  background: var(--wd-danger);
  border-color: var(--wd-danger);
  color: #fff;
}
.we-dialog-btn-danger:hover { filter: brightness(1.08); background: var(--wd-danger); color: #fff; }
.we-dialog-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--wd-bg);
  border: 1px solid var(--wd-border);
  border-radius: 6px;
  color: var(--wd-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin-top: 12px;
  box-sizing: border-box;
}
.we-dialog-input:focus { border-color: var(--wd-accent); }
.we-dialog-detail { margin-top: .6rem; font-size: .8125rem; line-height: 1.5; opacity: .75; }

/* Modal de reacoes: um pouco mais largo, porque lista gente. */
.we-dialog.wd-wide { max-width: 460px; }

/* Destaque temporario de um comentario, quando a pessoa chega ali por uma
 * notificacao. Fica alguns segundos e se apaga sozinho — o objetivo e o olho
 * achar o comentario, nao marcar ele pra sempre. */
@keyframes wdPisca {
  0%   { background-color: rgba(37, 99, 235, 0.18); }
  100% { background-color: rgba(37, 99, 235, 0.00); }
}
.wd-destaque {
  animation: wdPisca 3.2s ease-out;
  border-radius: 10px;
  outline: 2px solid var(--wd-accent);
  outline-offset: 3px;
  transition: outline-color .5s ease;
}
.wd-destaque.wd-destaque-saindo {
  outline-color: transparent;
}

/* ---------------------------------------------------------------
 * Dropdown do @ (marcar jogador). Fica em position:absolute preso ao
 * body — dentro do form ele era cortado pelo overflow do card.
 * --------------------------------------------------------------- */
.wm-dropdown {
  background: var(--wd-bg);
  border: 1px solid var(--wd-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .28);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.dark .wm-dropdown { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6); }

.wm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--wd-text);
}
.wm-item:hover, .wm-item.wm-ativo { background: var(--wd-hover); }

.wm-item img, .wm-item .wm-ini {
  width: 24px; height: 24px;
  border-radius: 999px;
  flex-shrink: 0;
  object-fit: cover;
}
.wm-item .wm-ini {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff; font-size: 11px; font-weight: 700;
}
.wm-nome { font-weight: 500; }
/* Nome da conta, quando o resultado veio pelo nome do personagem. */
.wm-sub { margin-left: auto; font-size: 11px; opacity: .6; }

/* Mencao dentro do texto ja publicado. */
.wb-mencao, a.wb-mencao {
  color: var(--wd-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  padding: 0 2px;
  background: color-mix(in srgb, var(--wd-accent) 12%, transparent);
}
.wb-mencao:hover { text-decoration: underline; }