.pgra-root {
  position: fixed;
  bottom: 20px;
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.pgra-right { right: 20px; }
.pgra-left { left: 20px; }

/* ---------------------------------------------------------------------------
 * Cor
 * A cor de AÇÃO vem das opções do plugin (`--pgra-color`, definida pelo JS).
 * Os dois tons derivados saem dela por `color-mix`, do mesmo jeito que o painel
 * os deriva — assim trocar a cor em Ajustes → PaperGames Assistant repinta o
 * widget inteiro, e não só o botão.
 *
 * O fallback é `@supports`, e NÃO a receita usual de repetir a declaração com a
 * versão chapada antes. Custom property aceita quase qualquer sequência de
 * tokens, então um `--x: color-mix(...)` é GUARDADO mesmo no navegador que não
 * entende a função — a declaração anterior não sobrevive, e o valor só quebra
 * lá na frente, na hora de usar, deixando a cor vazia em vez de padrão.
 * ------------------------------------------------------------------------- */
.pgra-root {
  --pgra-color-dark: #1b3752;
  --pgra-color-soft: #ecf1f6;
}
@supports (color: color-mix(in srgb, red 50%, white)) {
  .pgra-root {
    --pgra-color-dark: color-mix(in srgb, var(--pgra-color, #274b6d) 82%, #000);
    --pgra-color-soft: color-mix(in srgb, var(--pgra-color, #274b6d) 9%, #fff);
  }
}

/* Botão flutuante */
.pgra-fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--pgra-color, #274b6d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(22, 33, 46, 0.22);
  transition: transform 0.15s ease;
}
.pgra-fab:hover {
  transform: scale(1.06);
  background: var(--pgra-color-dark, #1b3752);
}

/* Painel do chat */
.pgra-panel {
  position: absolute;
  bottom: 74px;
  width: 360px;
  max-width: calc(100vw - 40px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(22, 33, 46, 0.24);
  display: flex;
  flex-direction: column;
}
.pgra-right .pgra-panel { right: 0; }
.pgra-left .pgra-panel { left: 0; }

.pgra-header {
  background: var(--pgra-color, #274b6d);
  color: #fff;
  padding: 14px 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pgra-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pgra-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Formulário de contato */
.pgra-lead {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pgra-intro { margin: 0 0 4px; color: #4a5768; font-size: 14px; }
.pgra-privacy { margin: 4px 0 0; color: #6b7789; font-size: 11px; line-height: 1.4; }
.pgra-lead input {
  padding: 11px 12px;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  font-size: 14px;
}
.pgra-lead button,
.pgra-compose button {
  background: var(--pgra-color, #274b6d);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}
.pgra-lead button { padding: 12px; font-size: 14px; }

/* Mensagens */
.pgra-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pgra-msg {
  max-width: 80%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.pgra-msg-player {
  align-self: flex-end;
  background: var(--pgra-color, #274b6d);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.pgra-msg-ai {
  align-self: flex-start;
  background: var(--pgra-color-soft, #ecf1f6);
  color: #16212e;
  border-bottom-left-radius: 4px;
}

/* Markdown da resposta da IA (negrito, itálico, listas…). O balão da IA passa a
   ter blocos de verdade, então o `pre-wrap` sai daqui — a quebra de linha dentro
   do parágrafo vira <br>, e o espaço entre parágrafos é margem, não linha em
   branco. O balão do jogador continua com `pre-wrap` (é texto puro). */
.pgra-msg-ai {
  white-space: normal;
}
.pgra-msg-ai p {
  margin: 0 0 8px;
}
.pgra-msg-ai p:last-child,
.pgra-msg-ai ul:last-child,
.pgra-msg-ai ol:last-child {
  margin-bottom: 0;
}
.pgra-msg-ai ul,
.pgra-msg-ai ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.pgra-msg-ai li {
  margin: 2px 0;
}
.pgra-msg-ai code {
  background: #fff;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 0.9em;
}
.pgra-msg-ai a {
  color: var(--pgra-color, #274b6d);
  font-weight: 700;
}

/* Caixa de envio */
.pgra-compose {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e3e8ee;
}
.pgra-compose input {
  flex: 1;
  padding: 11px 12px;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  font-size: 14px;
}
.pgra-compose button {
  width: 44px;
  font-size: 16px;
}

/* Cards de recomendação (RF-29b) */
.pgra-cards {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 85%;
}
.pgra-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
}
.pgra-card-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.pgra-card-name {
  font-weight: 700;
  font-size: 13px;
  color: #16212e;
}
.pgra-card-desc {
  font-size: 12px;
  color: #4a5768;
}