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

:root {
  --cor-primaria: #d94f8c; /* Rosa principal */
  --cor-secundaria: #f9f0f5; /* Rosa muito claro para fundo */
  --cor-mensagem: #ffe6f2; /* Rosa pastel para mensagens */
  --cor-fundo-chat: #f5e6ed; /* Rosa claro para fundo do chat */
  --cor-texto: #5a3a4a; /* Marrom rosado para texto */
  --cor-texto-claro: #8c6b7a; /* Rosa acinzentado para texto secundário */
  --cor-branco: #ffffff;
  --cor-destaque: #ff85b3; /* Rosa mais vibrante para destaques */
  --cor-rosa: #ff659a; /* Rosa original mantido */
  --cor-roxo-pastel: #c8a2c8; /* Lilás pastel para complemento */
  --cor-verde-pastel: #a8e6cf; /* Verde pastel para contraste suave */
}

body {
  font-family: Arial, sans-serif;
  background: var(--cor-secundaria);
  min-height: 100dvh;
  padding: 2vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8vmin;
  padding-bottom: 2vmin;
  /* Proteção contra seleção de texto */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Banner fixo no topo */
.free-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-destaque));
  color: white;
  padding: 2vmin 4vmin;
  text-align: center;
  font-weight: bold;
  font-size: min(3vmin, 3.5vmax);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1000;
  box-shadow: 0 0.5vmin 2vmin rgba(217, 79, 140, 0.3);
  min-height: 8vmin;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* NOVA SEÇÃO - CABEÇALHO COM IMAGEM */
.secao-cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vmin;
  width: 100%;
  max-width: 90vmin;
  padding: 4vmin;
  margin-bottom: 3vmin;
}

.imagem-circulo {
  width: 25vmin;
  height: 25vmin;
  border-radius: 50%;
  border: 0.1vmin solid var(--cor-primaria);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f0f5;
  box-shadow: 0 1vmin 2vmin rgba(217, 79, 140, 0.2);
}

.imagem-circulo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Proteção contra arrastar imagem */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.titulo-cabecalho {
  color: var(--cor-primaria);
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: min(5vmin, 6vmax);
  line-height: 1.2;
  text-shadow: 0 0.2vmin 0.5vmin rgba(217, 79, 140, 0.2);
}

.subtitulo-cabecalho {
  color: var(--cor-texto);
  text-align: center;
  font-size: min(3.5vmin, 4vmax);
  font-weight: 600;
  line-height: 1.3;
}

/* Container principal */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vmin;
  width: 100%;
  max-width: 90vmin;
  margin-bottom: 2vmin;
}

/* Contador de vagas */
.contador-vagas {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-destaque));
  color: var(--cor-branco);
  padding: 2.5vmin 4vmin;
  border-radius: 3vmin;
  text-align: center;
  font-weight: bold;
  width: 100%;
  text-transform: uppercase;
  transition: all 0.3s ease;
  font-size: min(3vmin, 3.5vmax);
  box-shadow: 0 1vmin 2vmin rgba(217, 79, 140, 0.3);
}

/* Animação de pulso rosa para urgência */
@keyframes pulse-pink-container {
  0% { 
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-destaque));
    box-shadow: 0 0 0 0 rgba(217, 79, 140, 0.7);
  }
  50% { 
    background: linear-gradient(135deg, #ff4081, #ff85b3);
    box-shadow: 0 0 0 10px rgba(217, 79, 140, 0);
  }
  100% { 
    background: linear-gradient(135deg, var(--cor-primaria), var(--cor-destaque));
    box-shadow: 0 0 0 0 rgba(217, 79, 140, 0);
  }
}

.contador-urgente {
  animation: pulse-pink-container 1.5s infinite !important;
}

.contador-texto {
  font-size: 1em;
  margin: 0;
}

/* Caixa do chat */
#chat {
  width: 100%;
  height: 35dvh;
  min-height: 25vmin;
  max-height: 45dvh;
  background: var(--cor-branco);
  border-radius: 4vmin;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1vmin 5vmin rgba(217, 79, 140, 0.15);
  border: 0.1vmin solid rgba(217, 79, 140, 0.1);
}

/* Cabeçalho */
#chat-header {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-destaque));
  color: var(--cor-branco);
  padding: 3vmin;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  font-size: min(3.5vmin, 4vmax);
}

/* Área das mensagens */
#chat-messages {
  flex: 1;
  padding: 2vmin;
  overflow-y: auto;
  background: var(--cor-fundo-chat);
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}

/* Permite rolagem apenas nos elementos filhos específicos */
#chat-messages .mensagem,
#chat-messages .digitando {
  pointer-events: auto;
}

/* Cada mensagem */
.mensagem {
  background: var(--cor-mensagem);
  padding: 2.5vmin 3vmin;
  border-radius: 3vmin;
  margin: 1vmin 0;
  font-size: min(3.2vmin, 3.8vmax);
  position: relative;
  align-self: flex-start;
  animation: fadeIn 0.3s ease-in;
  min-height: 12vmin;
  word-wrap: break-word;
  width: 65vmin;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 0.1vmin solid rgba(217, 79, 140, 0.1);
}

/* Container do texto da mensagem */
.texto-mensagem {
  flex: 1;
  padding-right: 8vmin;
  margin: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Nome em negrito */
.nome-destacado {
  font-weight: bold;
  color: var(--cor-primaria);
}

/* Animação de entrada suave */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2vmin); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hora no canto */
.hora {
  font-size: min(2.5vmin, 3vmax);
  color: var(--cor-texto-claro);
  position: absolute;
  bottom: 1.5vmin;
  right: 2.5vmin;
}

/* Indicador de digitação */
.digitando {
  background: var(--cor-mensagem);
  padding: 1.5vmin 2.5vmin;
  border-radius: 3vmin;
  margin: 1vmin 0;
  width: 15vmin;
  min-height: 8vmin;
  font-size: min(3.2vmin, 3.8vmax);
  position: relative;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.1vmin solid rgba(217, 79, 140, 0.1);
}

/* Container dos pontinhos animados */
.pontinhos-container {
  display: inline-flex;
  align-items: center;
}

.ponto {
  width: 1vmin;
  height: 1vmin;
  background: var(--cor-primaria);
  border-radius: 50%;
  margin: 0 0.3vmin;
  animation: pontoPulando 1.2s infinite ease-in-out;
}

.ponto:nth-child(1) { animation-delay: 0s; }
.ponto:nth-child(2) { animation-delay: 0.2s; }
.ponto:nth-child(3) { animation-delay: 0.4s; }

@keyframes pontoPulando {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-1vmin);
    opacity: 1;
  }
}

/* Botão entrar agora */
.btn-entrar {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-destaque));
  color: var(--cor-branco);
  padding: 3.5vmin 4.5vmin;
  border-radius: 4vmin;
  text-align: center;
  font-weight: bold;
  font-size: min(4vmin, 4.5vmax);
  width: 100%;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  animation: pulse-rosa 2s infinite ease-in-out;
  transform-origin: center;
  box-shadow: 0 1.5vmin 5vmin rgba(217, 79, 140, 0.3);
  transition: all 0.3s ease;
  min-height: 12vmin;
}

.btn-entrar:active {
  transform: translateY(-0.5vmin) scale(0.98);
  box-shadow: 0 1vmin 4vmin rgba(217, 79, 140, 0.4);
}

/* Animação de pulsação do botão */
@keyframes pulse-rosa {
  0% {
    transform: scaleX(1);
    box-shadow: 0 1.5vmin 5vmin rgba(217, 79, 140, 0.3);
  }
  25% {
    transform: scaleX(1.02);
    box-shadow: 0 1.5vmin 5vmin rgba(217, 79, 140, 0.3), 0 0 5vmin rgba(217, 79, 140, 0.5);
  }
  50% {
    transform: scaleX(1.04);
    box-shadow: 0 1.5vmin 5vmin rgba(217, 79, 140, 0.3), 0 0 6vmin rgba(217, 79, 140, 0.7);
  }
  75% {
    transform: scaleX(1.02);
    box-shadow: 0 1.5vmin 5vmin rgba(217, 79, 140, 0.3), 0 0 5vmin rgba(217, 79, 140, 0.5);
  }
  100% {
    transform: scaleX(1);
    box-shadow: 0 1.5vmin 5vmin rgba(217, 79, 140, 0.3);
  }
}

/* Loading spinner */
.loading { 
  display: none; 
  margin: 1.5rem 0; 
  text-align: center; 
}

.spinner { 
  border: 4px solid var(--cor-fundo-chat); 
  border-top: 4px solid var(--cor-primaria); 
  border-radius: 50%; 
  width: 45px; 
  height: 45px; 
  animation: spin 1s linear infinite; 
  margin: 0 auto 1rem; 
}

.loading p { 
  color: var(--cor-texto-claro); 
  font-size: 1rem; 
  font-weight: 500; 
}

@keyframes spin { 
  0% { transform: rotate(0deg); } 
  100% { transform: rotate(360deg); } 
}

/* ===== SEÇÕES ABAIXO DO BOTÃO ===== */
.secoes-inferiores {
  width: 100%;
  max-width: 90vmin;
  display: flex;
  flex-direction: column;
  gap: 3vmin;
  margin-top: 2vmin;
}

.secao-beneficios {
  background: var(--cor-branco);
  border-radius: 4vmin;
  padding: 4vmin;
  box-shadow: 0 1vmin 3vmin rgba(217, 79, 140, 0.1);
  border: 0.1vmin solid rgba(217, 79, 140, 0.1);
}

.titulo-secao {
  color: var(--cor-primaria);
  text-align: center;
  font-size: min(4vmin, 4.5vmax);
  font-weight: bold;
  margin-bottom: 3vmin;
  text-transform: uppercase;
}

.grid-beneficios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5vmin;
}

.item-beneficio {
  display: flex;
  align-items: center;
  gap: 3vmin;
  padding: 2vmin;
  background: #fdf5f9;
  border-radius: 2vmin;
  transition: transform 0.3s ease;
  border: 0.1vmin solid rgba(217, 79, 140, 0.1);
}

.item-beneficio:hover {
  transform: translateX(1vmin);
  box-shadow: 0 0.5vmin 1vmin rgba(217, 79, 140, 0.2);
}

.icone-beneficio {
  width: 12vmin;
  height: 12vmin;
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-destaque));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(5vmin, 6vmax);
  color: white;
  flex-shrink: 0;
  box-shadow: 0 0.5vmin 1vmin rgba(217, 79, 140, 0.3);
}

.texto-beneficio h3 {
  color: var(--cor-texto);
  font-size: min(3.5vmin, 4vmax);
  font-weight: bold;
  margin-bottom: 1vmin;
}

.texto-beneficio p {
  color: var(--cor-texto-claro);
  font-size: min(3vmin, 3.5vmax);
  line-height: 1.4;
}

.secao-depoimentos {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-roxo-pastel));
  border-radius: 4vmin;
  padding: 4vmin;
  color: var(--cor-branco);
  box-shadow: 0 1vmin 3vmin rgba(217, 79, 140, 0.2);
}

.depoimento-item {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2vmin;
  padding: 3vmin;
  margin-bottom: 2vmin;
  backdrop-filter: blur(10px);
  border: 0.1vmin solid rgba(255, 255, 255, 0.2);
}

.depoimento-texto {
  font-size: min(3.2vmin, 3.8vmax);
  line-height: 1.5;
  margin-bottom: 2vmin;
  font-style: italic;
}

.depoimento-autor {
  font-size: min(3vmin, 3.5vmax);
  font-weight: bold;
  text-align: right;
}

.secao-garantia {
  background: linear-gradient(135deg, var(--cor-primaria), var(--cor-destaque));
  border-radius: 4vmin;
  padding: 4vmin;
  color: var(--cor-branco);
  text-align: center;
  box-shadow: 0 1vmin 3vmin rgba(217, 79, 140, 0.3);
}

.garantia-titulo {
  font-size: min(4vmin, 4.5vmax);
  font-weight: bold;
  margin-bottom: 2vmin;
}

.garantia-descricao {
  font-size: min(3.2vmin, 3.8vmax);
  line-height: 1.5;
  opacity: 0.9;
}

/* Scrollbar personalizada - oculta para o usuário */
#chat-messages::-webkit-scrollbar {
  width: 0;
}

/* MEDIA QUERIES BASEADAS EM ALTURA */

/* Telas muito altas */
@media (min-height: 800px) {
  .secao-cabecalho {
    gap: 4vmin;
    padding: 5vmin;
  }
  
  .imagem-circulo {
    width: 20vmin;
    height: 20vmin;
  }
  
  #chat {
    height: 30dvh;
    max-height: 35dvh;
  }
}

/* Telas médias/tablets */
@media (max-height: 700px) {
  body {
    padding-top: 7vmin;
  }
  
  .free-banner {
    min-height: 7vmin;
    font-size: min(2.8vmin, 3.2vmax);
  }
  
  .secao-cabecalho {
    margin-bottom: 2vmin;
    gap: 2vmin;
  }
  
  .imagem-circulo {
    width: 20vmin;
    height: 20vmin;
  }
  
  #chat {
    height: 35dvh;
  }
}

/* Telas pequenas */
@media (max-height: 500px) {
  body {
    padding: 1vmin;
    padding-top: 6vmin;
    padding-bottom: 1vmin;
  }
  
  .free-banner {
    min-height: 6vmin;
    padding: 1.5vmin 3vmin;
    font-size: min(2.5vmin, 3vmax);
  }
  
  .secao-cabecalho {
    flex-direction: row;
    padding: 2vmin 3vmin;
    gap: 3vmin;
    margin-bottom: 1vmin;
  }
  
  .imagem-circulo {
    width: 15vmin;
    height: 15vmin;
    flex-shrink: 0;
  }
  
  .titulo-cabecalho {
    text-align: left;
    font-size: min(4vmin, 4.5vmax);
  }
  
  .subtitulo-cabecalho {
    text-align: left;
    font-size: min(3vmin, 3.5vmax);
  }
  
  .container {
    gap: 2vmin;
    margin-bottom: 1vmin;
  }
  
  #chat {
    height: 40dvh;
    min-height: 20vmin;
  }
  
  .mensagem {
    width: 55vmin;
    min-height: 10vmin;
    padding: 2vmin 2.5vmin;
  }
  
  .btn-entrar {
    padding: 2.5vmin 3.5vmin;
    min-height: 10vmin;
    font-size: min(3.5vmin, 4vmax);
  }
}

/* Modo paisagem para telas pequenas */
@media (max-height: 500px) and (orientation: landscape) {
  .secao-cabecalho {
    flex-direction: row;
  }
  
  #chat {
    height: 45dvh;
  }
  
  .grid-beneficios {
    grid-template-columns: 1fr 1fr;
  }
}

/* Garantir legibilidade em telas muito largas */
@media (min-width: 768px) {
  .grid-beneficios {
    grid-template-columns: 1fr 1fr;
  }
}