/* Mascote do Harness (js/harness-mascote.js): o robô que passeia pela conversa enquanto o
   agente trabalha. Não recebe clique e fica abaixo dos cartões de aprovação e das janelas. */
.hx-main { position: relative; }
/* palco: o retângulo exato da conversa; recorta o robô quando ele entra ou sai pelas bordas */
.hx-mascote-palco { position: absolute; z-index: 4; overflow: hidden; pointer-events: none; }
.hx-mascote {
  position: absolute; left: 0; top: 0; pointer-events: none;
  will-change: transform; transition: opacity .4s ease;
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, .25));
}
.hx-mascote-robo {
  background-image: url('/img/harness-mascote/robo-passeio.png?v=20261018a');
  background-repeat: no-repeat;
  image-rendering: pixelated;
  position: relative;
}
/* sombra no chão */
.hx-mascote::before {
  content: ''; position: absolute; left: 36%; right: 36%; bottom: 14%; height: 6px;
  border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(1.5px);
}
/* "holograma" na frente do robô quando ele digita */
.hx-mascote.digitando::after {
  content: ''; position: absolute; left: 32%; right: 32%; top: 50%; height: 12%;
  border-radius: 3px; border: 1px solid rgba(94, 234, 212, .8);
  background: linear-gradient(180deg, rgba(94, 234, 212, .35), rgba(94, 234, 212, .08));
  box-shadow: 0 0 10px rgba(94, 234, 212, .6);
  animation: hxMascoteHolo 1.2s ease-in-out infinite;
}
@keyframes hxMascoteHolo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.hx-mascote.saindo { opacity: .85; }
/* "reduzir animações": o robô continua (mais devagar, no JS), mas o holograma não pisca */
@media (prefers-reduced-motion: reduce) { .hx-mascote.digitando::after { animation: none; opacity: .8; } }