/* Manifesto: seção fullscreen pinada. O título se forma em partículas, no mesmo padrão de "O que entregamos";
   depois a conversa de WhatsApp é encenada sobre o celular, o título sai e a revelação entra abaixo dele.
   A tela segue a perspectiva do PNG (phone_alpha.png, 506×1208): a homografia do .tela-chat é a da matrix3d. */

.manifesto {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: var(--branco);
}

/* Título em Chakra Petch 700, com o mesmo clamp e line-height dos títulos de "O que entregamos".
   Sobreposto ao celular: mobile centralizado no topo da tela do celular (centro via JS); desktop na metade esquerda */
.manifesto__titulo {
  position: absolute;
  z-index: 2;
  top: 8svh;
  left: 50%;
  width: 84vw;
  margin: 0;
  padding: 0;
  font-family: 'Chakra Petch', var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.7rem, 6.5vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: center;
  color: #111;
}

/* Com a formação em partículas, o texto DOM fica transparente e preserva a leitura por leitores de tela */
.manifesto--js .manifesto__titulo {
  color: transparent;
}

@media (min-width: 768px) {
  .manifesto__titulo {
    top: 50%;
    left: 5vw;
    width: min(46vw, 40rem);
    text-align: left;
  }
}

/* Linha de progresso fina na base da seção pinada */
.manifesto__progresso {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--cinza-800);
  transform-origin: left center;
}

/* Celular em fullscreen: 96% da altura da tela, centralizado no mobile e com o centro em 68% da largura no desktop.
   A altura do palco define a escala base do JS (--escala-base = 0,96 × svh ÷ 1208) */
.palco-chat {
  position: absolute;
  z-index: 1;
  top: 2svh;
  left: calc(50% - 20.1svh);
  height: 96svh;
  width: calc(96svh * 506 / 1208);
  transform-origin: 50% 0;
}

@media (min-width: 768px) {
  .palco-chat {
    left: calc(68% - 20.1svh);
  }
}

/* Celular: o PNG em tamanho lógico 506×1208, reduzido pela escala base do palco */
.phone-png {
  position: absolute;
  top: 0;
  left: 0;
  width: 506px;
  height: 1208px;
  transform: scale(var(--escala-base, 0.6));
  transform-origin: 0 0;
}

.phone-png img {
  display: block;
  width: 506px;
  height: 1208px;
}

/* Vidro do PNG: retângulo lógico 442×1173 levado aos 4 cantos da tela pela homografia (matrix3d) */
.tela-chat {
  position: absolute;
  left: 0;
  top: 0;
  width: 442px;
  height: 1173px;
  transform-origin: 0 0;
  transform: matrix3d(1.072008, 0.118148, 0, 0.000146, 0, 1, 0, 0, 0, 0, 1, 0, 52, 1, 0, 1);
  border-radius: 44px;
  overflow: hidden;
  backface-visibility: hidden;
  background: var(--wa-fundo);
}

/* Conteúdo do chat em layout de 330×875 (medidas originais), ampliado 1.34× para preencher o vidro */
.tela-chat__conteudo {
  width: 330px;
  height: 875.37px;
  transform: scale(1.34);
  transform-origin: 0 0;
  display: flex;
  flex-direction: column;
  font-family: Roboto, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--wa-texto);
}

/* Barra de status */
.tela-chat__status {
  flex: none;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: var(--wa-header);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
}

.tela-chat__icones {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tela-chat__icones svg {
  display: block;
  flex: none;
}

.tela-chat__bateria {
  font-size: 9px;
}

/* Header do chat: 56px, ícones de 24px em caixas fixas */
.tela-chat__cabecalho {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
  background: var(--wa-header);
  color: #fff;
}

.tela-chat__esquerda {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.tela-chat__icone {
  flex: none;
  width: 24px;
  height: 24px;
  display: block;
}

.tela-chat__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #dfe5e7;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--wa-texto);
}

.tela-chat__identidade {
  min-width: 0;
}

.tela-chat__nome {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.tela-chat__linha {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.2;
  opacity: 0.9;
}

.tela-chat__nav {
  flex: none;
  width: 100px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Área de mensagens: fundo sólido e doodle como camada acima */
.tela-chat__corpo {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background-color: var(--wa-fundo);
}

.tela-chat__corpo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='20' cy='24' r='3' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Cpath d='M70 20l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3Ccircle cx='96' cy='80' r='2' fill='%23000'/%3E%3Cpath d='M30 92q8-8 16 0' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  opacity: 0.08;
  pointer-events: none;
}

/* Pílula de data, flutuando no topo da área de mensagens */
.tela-chat__pilula {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  font-size: 9.5px;
  color: var(--wa-hora);
  white-space: nowrap;
}

.chat {
  position: relative;
  margin: 0;
  padding: 2rem 8px 8px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Aviso de conta comercial, centralizado */
.chat__aviso {
  align-self: center;
  max-width: 90%;
  padding: 4px 8px;
  border-radius: 8px;
  background: #d7f5f3;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  font-size: 10.5px;
  line-height: 1.3;
  text-align: center;
  color: #54656f;
}

/* Balões: radius 8px, cauda no canto superior externo (pseudo-elemento) */
.chat__balao,
.chat__digitando {
  position: relative;
  max-width: 78%;
  border-radius: 8px;
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}

.chat__balao {
  display: flex;
  flex-direction: column;
  padding: 5px 7px 4px;
}

.chat__balao p {
  display: flow-root;
  margin: 0;
}

.chat__balao--cliente {
  align-self: flex-end;
  background: var(--wa-balao-saida);
}

.chat__balao--ia {
  align-self: flex-start;
  background: var(--wa-balao-entrada);
}

.chat__balao--cliente::before,
.chat__balao--ia::before,
.chat__digitando::before {
  content: "";
  position: absolute;
  top: 0;
  width: 8px;
  height: 13px;
}

.chat__balao--cliente::before {
  right: -8px;
  background: var(--wa-balao-saida);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.chat__balao--ia::before,
.chat__digitando::before {
  left: -8px;
  background: var(--wa-balao-entrada);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* Horário e checks no fim da última linha, como no app */
.chat__hora {
  float: right;
  margin: 5px 0 -2px 8px;
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
  color: var(--wa-hora);
}

.chat__ticks {
  color: #53bdeb;
  letter-spacing: -2px;
}

/* Botões de ação do balão da IA: linhas finas entre eles, texto azul centralizado */
.chat__acoes {
  display: flex;
  flex-direction: column;
  margin: 6px -7px -4px;
}

.chat__acoes span {
  display: block;
  padding: 7px 0 6px;
  border-top: 1px solid #e9edef;
  text-align: center;
  font-size: 13px;
  color: #027eb5;
}

/* Indicador "digitando…": entra e sai da lista pela timeline */
.chat__digitando {
  display: none;
  align-self: flex-start;
  gap: 4px;
  padding: 8px 10px;
  background: var(--wa-balao-entrada);
}

.chat__digitando span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wa-hora);
}

/* Barra de entrada: campo 36px, microfone 40px */
.tela-chat__entrada {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--wa-entrada);
}

.tela-chat__campo {
  flex: 1;
  min-width: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 18px;
  background: var(--branco);
  color: var(--wa-hora);
}

.tela-chat__campo svg {
  flex: none;
  width: 24px;
  height: 24px;
  display: block;
}

.tela-chat__placeholder {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #8696a0;
  white-space: nowrap;
}

.tela-chat__microfone {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wa-acento);
  display: grid;
  place-items: center;
}

.tela-chat__microfone svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Barra de navegação do sistema, 16px */
.tela-chat__navegacao {
  flex: none;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: var(--wa-entrada);
  color: #54656f;
}

.tela-chat__navegacao svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Revelação: abaixo do celular recuado (fim do pin); o topo é definido pelo JS */
.revelacao {
  position: absolute;
  left: 1.25rem;
  width: calc(100% - 2.5rem);
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  text-align: center;
}

/* Desktop: a revelação fica centrada sob o celular (que está em 68% da largura) */
@media (min-width: 768px) {
  .revelacao {
    left: calc(68% - 20vw);
    width: 40vw;
  }
}

.revelacao__kicker {
  margin: 0;
  font-family: var(--fonte-retro);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--cinza-500);
}

.revelacao__titulo {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(1.3rem, 5.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--cinza-800);
}

.revelacao__texto {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cinza-800);
}

/* Movimento reduzido: sem pin, a seção cresce com o conteúdo e tudo fica visível */
/* Movimento reduzido: sem pin, celular em altura fixa de 70svh e título estático */
@media (prefers-reduced-motion: reduce) {
  .manifesto {
    height: auto;
    padding-bottom: 3rem;
  }

  .manifesto__titulo {
    position: relative;
    z-index: auto;
    top: auto;
    left: auto;
    width: auto;
    padding: 2rem 1rem 0;
    text-align: center;
  }

  .palco-chat {
    position: relative;
    top: auto;
    left: auto;
    height: 70svh;
    width: calc(70svh * 506 / 1208);
    margin: 2rem auto 0;
  }

  .revelacao {
    position: static;
    margin-top: 2rem;
  }
}