/* Página da experiência: mobile primeiro. */
.pagina-experiencia { background: radial-gradient(120% 70% at 50% 0%, #15112a 0%, var(--fundo) 60%); }
#app { min-height: 100vh; min-height: 100dvh; }
.tela { min-height: 100vh; min-height: 100dvh; }
.centro { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 18px; text-align: center; padding: 16px; }
.esfera.pequena { --tam: 90px; }
.caixa { max-width: 560px; margin: 0 auto; padding: 28px 16px 56px; }
.caixa h1 { font-size: clamp(1.8rem, 6vw, 2.3rem); margin-top: .4em; }
.voltar { font: .9rem/1 var(--sans); color: var(--suave); text-decoration: none; }
.mono { font-family: var(--mono); letter-spacing: .06em; }

/* G1 */
.pag-estado { display: grid; gap: 14px; justify-items: center; text-align: center; margin-top: 18px; }
.valor { font-size: 2rem; margin: 0; }
.qr { width: 240px; height: 240px; background: #fff; border-radius: 12px; padding: 8px; }
.copia { width: 100%; text-align: left; font: .9rem/1.4 var(--sans); color: var(--suave); }
.copia summary { cursor: pointer; padding: 6px 0; }
.copia textarea { font: .78rem/1.4 var(--mono); margin-top: 8px; resize: none; }
.aguardando { font: .95rem/1.4 var(--sans); color: var(--suave); display: flex; align-items: center; gap: 10px; margin: 0; }
.ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--violeta); animation: ponto 1.4s ease-in-out infinite; flex: none; }
@keyframes ponto { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.ok-titulo { font-size: 1.3rem; color: var(--ok); margin: 0; }
.erro-titulo { font-size: 1.3rem; color: var(--erro); margin: 0; }
.codigo-grande {
  font: 700 clamp(1.7rem, 8vw, 2.3rem)/1 var(--mono); letter-spacing: .1em; color: #fff;
  background: var(--fundo-2); border: 1px dashed var(--violeta); border-radius: 14px; padding: 18px 20px; margin: 4px 0; user-select: all;
}

/* E1 */
.lista-consentimento { padding-left: 1.1em; }
.lista-consentimento li { margin-bottom: .8em; }
.marcar { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; cursor: pointer; font-size: 1.02rem; }
.marcar input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--violeta); flex: none; }
.erro-campo { color: var(--erro); font: .9rem/1.4 var(--sans); min-height: 1.4em; margin: 6px 0; }

/* E2/E4 · Conversa */
.conversa {
  --conv-tam: 18px; --conv-linha: 1.6; --conv-estilo: normal; --conv-peso: 400;
  --fonte-condutor: var(--serifa);
  max-width: 720px; margin: 0 auto; height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto auto auto;
  padding: 0 16px; padding-bottom: env(safe-area-inset-bottom);
}
.conversa-topo { display: grid; justify-items: center; gap: 6px; padding: 18px 0 8px; transition: padding .25s; }
.condutor-visual { display: grid; place-items: center; height: 124px; transition: height .25s; }
.conversa-esfera { --tam: 112px; transition: width .25s, height .25s; }
.condutor-nome { font: italic .95rem/1 var(--fonte-condutor); color: var(--apagado); letter-spacing: .12em; text-transform: lowercase; margin: 0; }
.teclado-aberto .condutor-visual { height: 52px; }
.teclado-aberto .conversa-esfera { --tam: 46px; }
.teclado-aberto .conversa-topo { padding: 8px 0 4px; }
.teclado-aberto .condutor-nome { display: none; }

.mensagens { overflow-y: auto; overscroll-behavior: contain; padding: 8px 2px 16px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.msg { max-width: 92%; word-wrap: break-word; white-space: pre-wrap; }
.msg-condutor {
  align-self: flex-start; font-family: var(--fonte-condutor); font-size: var(--conv-tam); line-height: var(--conv-linha);
  font-style: var(--conv-estilo); font-weight: var(--conv-peso); color: var(--texto);
}
.msg-condutor .frase { animation: frase-entra .6s ease-out both; }
@keyframes frase-entra { from { opacity: 0; } to { opacity: 1; } }
.msg-condutor.revelando { cursor: pointer; }
.msg-usuario {
  align-self: flex-end; font: 1rem/1.5 var(--sans); color: #e9e4f5; background: rgba(142, 108, 240, .14);
  border: 1px solid rgba(142, 108, 240, .28); border-radius: 16px 16px 4px 16px; padding: 10px 14px;
}
.aviso-conversa { font: .92rem/1.45 var(--sans); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; background: var(--fundo-2); border: 1px solid var(--linha); color: var(--suave); }
.aviso-conversa.erro { border-color: rgba(255, 138, 138, .4); color: #ffc9c9; }
.aviso-conversa.alerta { border-color: rgba(240, 180, 106, .45); color: #ffe0b8; }

.entrada { position: relative; display: flex; gap: 8px; align-items: flex-end; padding: 10px 0 14px; border-top: 1px solid var(--linha); }
.entrada textarea { resize: none; max-height: 160px; font: 1rem/1.45 var(--sans); }
.entrada .enviar { flex: none; padding: 12px 18px; }
.contador { position: absolute; right: 96px; top: -8px; font: .75rem/1 var(--sans); color: var(--alerta); }
.continuar { display: grid; justify-items: center; padding: 14px 0 24px; }

.ferramentas-conversa { position: fixed; left: 12px; top: 12px; z-index: 20; }
.botao-flutuante {
  font: italic 600 1rem/1 var(--serifa); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linha);
  background: rgba(18, 16, 25, .85); color: var(--suave); cursor: pointer; backdrop-filter: blur(6px);
}
.botao-flutuante:hover { color: var(--texto); border-color: var(--violeta); }
.menu-tipografia {
  margin-top: 8px; background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 6px;
  display: grid; gap: 2px; min-width: 210px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); max-height: 70vh; overflow: auto;
}
.menu-tipografia button {
  display: flex; align-items: baseline; gap: 10px; text-align: left; background: none; border: 0; color: var(--texto);
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: .95rem;
}
.menu-tipografia button:hover { background: rgba(255, 255, 255, .05); }
.menu-tipografia button[aria-checked="true"] { background: rgba(142, 108, 240, .18); }
.menu-tipografia .amostra { width: 36px; display: inline-block; }

/* Caixa flutuante "encerrar" */
.encerrar {
  position: fixed; right: 12px; top: 12px; z-index: 30; font: 500 .85rem/1 var(--sans); letter-spacing: .04em;
  color: var(--suave); background: rgba(18, 16, 25, .85); border: 1px solid var(--linha); border-radius: 999px; padding: 11px 15px; cursor: pointer; backdrop-filter: blur(6px);
}
.encerrar:hover { color: var(--texto); border-color: var(--erro); }
.dialogo { position: fixed; inset: 0; z-index: 50; background: rgba(5, 4, 9, .72); display: grid; place-items: center; padding: 16px; }
.dialogo-caixa { background: var(--painel); border: 1px solid var(--linha); border-radius: 16px; padding: 22px; max-width: 400px; width: 100%; }
.dlg-titulo { font-size: 1.25rem; margin-bottom: .4em; }
.dlg-botoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* E6 */
.nota-feedback { border: 0; padding: 0; margin: 18px 0 10px; }
.nota-feedback legend { margin-bottom: 10px; }
.estrelas { display: flex; gap: 8px; }
.estrelas label { cursor: pointer; }
.estrelas input { position: absolute; opacity: 0; }
.estrelas span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--linha); font: 600 1rem/1 var(--sans); color: var(--suave); }
.estrelas input:checked + span { background: rgba(142, 108, 240, .25); border-color: var(--violeta); color: #fff; }
.estrelas input:focus-visible + span { outline: 2px solid var(--violeta-claro); outline-offset: 2px; }
#form-feedback textarea { margin: 6px 0 12px; }
.calma h1 { color: var(--texto); }
.calma p { font-size: 1.1rem; }

.linha-codigo { display: flex; gap: 10px; margin: 16px 0; }
@media (max-width: 520px) { .linha-codigo { flex-direction: column; } .dlg-botoes .botao { width: 100%; } }

/* Faixa do ambiente de testes: não cobre os botões flutuantes nem a conversa */
.com-faixa .faixa-ambiente { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 3px 8px; font-size: .7rem; }
.com-faixa .encerrar, .com-faixa .ferramentas-conversa { top: 30px; }
.com-faixa .conversa { height: calc(100dvh - 22px); margin-top: 22px; }
.com-faixa .conversa-topo { padding-top: 24px; }