/* ===========================================================================
   Conversando com o Tarólogo
   ---------------------------------------------------------------------------
   Folha própria, carregada só em conversa.php. Reaproveita o que já existe no
   mesa.css — .sobrescrito, .secao__titulo, .botao, .campo, .alternador,
   .creditos-aviso, .creditos-saldo, .creditos-notas, .cuidado — e acrescenta o
   que é do chat: os balões, a carta que vira e o baralho sendo embaralhado.
   Mobile-first, como o resto do site.
   =========================================================================== */

.conversa {
  max-width: 48rem;
  margin: 0 auto;
  padding-inline: var(--ritmo);
  padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5rem);
}

/* -------------------------------------------- a ilustracao, a esquerda */

/* No celular: uma faixa curta no alto, com o leque pequeno. A conversa e o
   que importa numa tela estreita; a arte so da o tom e sai do caminho. */
.conversa-arte {
  margin: 0 0 1.6rem;
  text-align: center;
}

.conversa-arte__leque {
  position: relative;
  width: 13rem;
  height: 10.5rem;
  margin: 0 auto;
}
/* O brilho atras das cartas: a mesma luz dourada do resto do site. */
.conversa-arte__leque::before {
  content: "";
  position: absolute;
  inset: -18% -30%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 138, 62, .22), transparent 65%);
}
.conversa-arte__leque img {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: 42%;
  height: auto;
  margin-left: -21%;
  border: 1px solid rgba(192, 138, 62, .45);
  border-radius: var(--raio);
  box-shadow: 0 .8rem 1.8rem rgba(0, 0, 0, .45);
  transform-origin: 50% 120%;      /* gira a partir de baixo: abre em leque */
}
/* A ordem no HTML e esquerda, direita, centro: a do meio vem por ultimo para
   ficar por cima das duas, sem z-index a administrar. */
.conversa-arte__leque img:nth-child(1) { transform: translateX(-58%) rotate(-13deg); }
.conversa-arte__leque img:nth-child(2) { transform: translateX(58%) rotate(13deg); }
.conversa-arte__leque img:nth-child(3) { transform: translateY(-6%); }

.conversa-arte__imagem {
  display: block;
  width: min(100%, 16rem);
  height: auto;
  margin: 0 auto;
  border-radius: var(--raio);
}

.conversa-arte__legenda {
  margin: 1rem 0 0;
  font-family: var(--letra-grav);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--latao-claro);
}

/* No computador: duas colunas. A arte fica PRESA no alto enquanto a conversa
   cresce ao lado — uma conversa de dez perguntas rola bastante, e uma coluna
   que subisse junto deixaria metade da tela vazia a maior parte do tempo. */
@media (min-width: 900px) {
  .conversa {
    max-width: 72rem;
    display: grid;
    grid-template-columns: minmax(15rem, 21rem) minmax(0, 46rem);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    justify-content: center;
  }

  .conversa-arte {
    position: sticky;
    top: 2rem;
    margin: 0;
    padding-top: 1.2rem;
  }

  .conversa-arte__leque { width: 19rem; height: 15.5rem; }
  .conversa-arte__imagem { width: 100%; }
  .conversa-arte__legenda { margin-top: 1.6rem; font-size: .7rem; }
}

.conversa-topo__linha {
  margin: 0;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--marfim-3);
}
.conversa-topo__linha b { color: var(--latao-claro); font-weight: 600; }

/* --------------------------------------------------------------- o chat */

.chat { margin-top: 2rem; }

.chat__mensagens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.chat__mensagens:empty { display: none; }

.chat__msg { display: flex; }

/* A pergunta de quem consulta: à direita, em balão. */
.chat__msg--voce { justify-content: flex-end; }
.chat__balao {
  max-width: 85%;
  margin: 0;
  padding: .8rem 1rem;
  border: 1px solid rgba(192, 138, 62, .35);
  border-radius: 12px 12px 2px 12px;
  background: rgba(192, 138, 62, .1);
  color: var(--marfim);
  font-size: .95rem;
  line-height: 1.6;
  white-space: pre-line;      /* a pergunta pode ter mais de uma linha */
  overflow-wrap: anywhere;
}

/* A resposta do tarólogo: carta à esquerda, texto ao lado. No celular a carta
   fica menor e o texto continua ao lado — empilhar faria cada resposta ocupar
   uma tela inteira. */
.chat__msg--tarologo {
  gap: .9rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid rgba(192, 138, 62, .2);
  border-radius: 2px 12px 12px 12px;
  background: rgba(8, 26, 21, .5);
}

.chat__texto { flex: 1; min-width: 0; transition: opacity .6s ease; }
.chat__texto--oculto { opacity: 0; }

.chat__carta-nome {
  margin: 0;
  font-family: var(--letra-display);
  font-size: 1.15rem;
  color: var(--marfim);
}
.chat__carta-nome span {
  margin-left: .5rem;
  font-family: var(--letra-ui);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E8A0A8;
}
.chat__chaves {
  margin: .25rem 0 0;
  font-size: .78rem;
  font-style: italic;
  color: var(--marfim-1);
}
.chat__resposta {
  margin: .7rem 0 0;
  font-size: .97rem;
  line-height: 1.75;
  color: var(--marfim);
}
.chat__texto .cuidado { margin-top: .9rem; }

/* ------------------------------------------------------- a carta que vira */

.chat__carta {
  flex: none;
  width: 4.6rem;
  aspect-ratio: var(--carta-prop);
  perspective: 600px;
}
.chat__flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3, .7, .2, 1);
}
.chat__carta--virada .chat__flip { transform: rotateY(180deg); }

.chat__face {
  position: absolute;
  inset: 0;
  border-radius: var(--raio);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* O mesmo verso das cartas da mesa: quem já tirou cartas reconhece o baralho. */
.chat__verso,
.embaralho i {
  background:
    repeating-linear-gradient(45deg, rgba(192,138,62,.16) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-45deg, rgba(192,138,62,.16) 0 3px, transparent 3px 9px),
    linear-gradient(160deg, #17392F, #0C221C);
  border: 1px solid rgba(192, 138, 62, .4);
}

.chat__frente {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  background: var(--pano-sombra);
  border: 1px solid rgba(192, 138, 62, .4);
  text-align: center;
  font-size: .7rem;
  color: var(--marfim);
}
.chat__frente img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Invertida: a carta sai de cabeça para baixo, como na mesa. Gira a imagem, e
   não a face inteira, para não brigar com o giro do flip. */
.chat__carta--invertida .chat__frente img { transform: rotate(180deg); }

/* ------------------------------------------------- o baralho embaralhando */

.chat__msg--espera { align-items: center; }
.chat__espera-texto {
  margin: 0;
  font-family: var(--letra-grav);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--latao-claro);
}

.embaralho {
  position: relative;
  flex: none;
  width: 8.5rem;
  height: 6.4rem;
}
.embaralho i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3rem;
  aspect-ratio: var(--carta-prop);
  margin: -2.57rem 0 0 -1.5rem;      /* centraliza: metade da largura e da altura */
  border-radius: var(--raio);
  animation: embaralhar 1.3s ease-in-out infinite;
}

/* Cinco cartas, cada uma saindo do monte para um lado e voltando, em tempos
   desencontrados: metade para a esquerda, metade para a direita. É o corte do
   baralho visto de cima — sem pretensão de física, só de gesto. */
.embaralho i:nth-child(1) { --dx: -2.6rem; --rot: -10deg; animation-delay: 0s; }
.embaralho i:nth-child(2) { --dx:  2.6rem; --rot:  10deg; animation-delay: .18s; }
.embaralho i:nth-child(3) { --dx: -1.6rem; --rot:  -6deg; animation-delay: .36s; }
.embaralho i:nth-child(4) { --dx:  1.6rem; --rot:   6deg; animation-delay: .54s; }
.embaralho i:nth-child(5) { --dx:  0rem;   --rot:   0deg; animation-delay: .72s; }

@keyframes embaralhar {
  0%, 100% { transform: translate(0, 0) rotate(0); z-index: 1; }
  35%      { transform: translate(var(--dx), -.5rem) rotate(var(--rot)); z-index: 3; }
  70%      { transform: translate(0, .25rem) rotate(0); z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .embaralho i { animation: none; }
  .chat__flip, .chat__texto { transition: none; }
}

/* ------------------------------------------------------ embaixo do chat */

.chat__continuar,
.chat__fim {
  margin-top: 1.4rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid rgba(192, 138, 62, .3);
  background: rgba(28, 70, 59, .3);
  text-align: center;
}
.chat__continuar p {
  margin: 0 0 .9rem;
  font-family: var(--letra-display);
  font-size: 1.15rem;
  color: var(--marfim);
}
.chat__continuar-botoes { display: flex; gap: .7rem; justify-content: center; }
.chat__continuar-botoes .botao { min-width: 6.5rem; }

/* "Conversa nova": um link discreto abaixo do Sim/Não. Não disputa com os dois
   botões, que respondem à pergunta do bloco; só fica à mão para quem mudou de
   assunto. A área de toque é maior que o texto, pelo padding. */
.chat__nova {
  margin-top: .9rem;
  padding: .45rem .6rem;
  background: none;
  border: 0;
  color: var(--marfim-3);
  font: inherit;
  font-size: .86rem;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.chat__nova:hover { color: var(--latao-claro); }

.chat__fim p:not(.sobrescrito) {
  margin: 0 0 1rem;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--marfim-3);
}
.chat__fim .botao { margin: 0 .3rem .4rem; }

.chat__sem-saldo { margin-top: 1.4rem; }

.chat__form {
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
}
.chat__acoes { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

@media (min-width: 640px) {
  .chat__carta { width: 6.2rem; }
  .chat__msg--tarologo { padding: 1.2rem; gap: 1.2rem; }
  .chat__balao { max-width: 75%; }
}