/* =========================================================================
   Mascote IDX.IA (porte do pacote mascote-idxia, React -> HTML/JS puro)
   Fonte: C:\dev\admin_idxcompany\mascote-idxia\src\mascote.css. As regras do
   mascote (.idx-*) são as mesmas do pacote; mudou só a cor padrão, que aqui é
   o roxo da IDX.IA. Por baixo: o mascote flutuante do site (.idx-amigo).
   ========================================================================= */

.idx-raiz {
  --idx-primaria: #7A2CBF;
  --idx-secundaria: #7A2CBF;
  --idx-olho: #ffffff;
  --idx-brilho: var(--idx-primaria);
  position: relative;
  display: inline-block;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}
.idx-sombra { position: absolute; left: 19%; top: 86%; width: 62%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, var(--idx-secundaria), transparent); opacity: .24; pointer-events: none; }
.idx-corpo-mov { position: absolute; inset: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; border-radius: 24%; }
.idx-corpo-mov:focus-visible { outline: 2px solid var(--idx-primaria); outline-offset: 4px; }
.idx-arrastando { cursor: grabbing; }
.idx-levanta { width: 100%; height: 100%; transition: transform 220ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
  .idx-corpo-mov[data-estado="idle"]:not(.idx-arrastando):hover .idx-levanta { transform: translateY(-4px); }
}
.idx-svg { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: 50% 85%; transition: transform 160ms ease-out; }
.idx-pressionado .idx-svg { transform: scale(.97); }
.idx-corpo { fill: var(--idx-primaria); transition: fill 300ms ease; }
/* pensando: as três bolhas da nuvem sobem em sequência (o "trabalhando" do manual) e os olhos olham para cima */
.idx-b { transform-box: fill-box; transform-origin: 50% 100%; }
.idx-raiz[data-estado="thinking"] .idx-b1 { animation: idx-bolha 1.4s ease-in-out infinite; }
.idx-raiz[data-estado="thinking"] .idx-b2 { animation: idx-bolha 1.4s ease-in-out .18s infinite; }
.idx-raiz[data-estado="thinking"] .idx-b3 { animation: idx-bolha 1.4s ease-in-out .36s infinite; }
.idx-pensa { animation: idx-olha 1.4s ease-in-out infinite; }
@keyframes idx-bolha { 0%, 60%, 100% { transform: scale(1); } 25% { transform: scale(1.09); } }
@keyframes idx-olha { 0%, 100% { transform: translate(0, 0); } 30%, 70% { transform: translate(4px, -6px); } }
/* com raiva: o estado de erro do símbolo do manual, vermelho e com um tremor curto ao entrar */
.idx-raiz[data-estado="angry"] .idx-corpo { fill: var(--idx-raiva, #E63535); }
.idx-raiz[data-estado="angry"] .idx-sombra { background: radial-gradient(closest-side, var(--idx-raiva, #E63535), transparent); }
.idx-raiz[data-estado="angry"] .idx-svg { animation: idx-treme 320ms ease-in-out both; }
@keyframes idx-treme { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3%); } 75% { transform: translateX(3%); } }
.idx-olhar { transition: transform 180ms ease-out; }
.idx-olho { fill: var(--idx-olho); }
.idx-linha { fill: none; stroke: var(--idx-olho); stroke-linecap: round; stroke-linejoin: round; }
.idx-pontos { fill: var(--idx-secundaria); transform-box: fill-box; transform-origin: center; animation: idx-pontos 1.2s ease-in-out infinite; }
.idx-pontos.d2 { animation-delay: .15s; }
.idx-pontos.d3 { animation-delay: .3s; }
.idx-zz { fill: var(--idx-secundaria); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 700; }
.idx-zflut { animation: idx-flut 3s ease-in-out infinite; }
.idx-piscar { transform-box: fill-box; transform-origin: center; animation: idx-piscar 5s infinite; }
.idx-fala { transform-box: fill-box; transform-origin: center; animation: idx-fala .5s ease-in-out infinite alternate; }
.idx-brilha { fill: var(--idx-brilho); stroke: var(--idx-brilho); stroke-width: 6; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; animation: idx-faisca 500ms 160ms cubic-bezier(.22, 1, .36, 1) both; }
/* feliz: a nuvem quica uma vez ao chegar, como o "pronta" do símbolo */
.idx-raiz[data-estado="happy"] .idx-svg { animation: idx-nuvem-pula 560ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes idx-faisca { 0% { opacity: 0; transform: scale(.3) rotate(-60deg); } 55% { opacity: 1; transform: scale(1.25) rotate(0deg); } 100% { opacity: 1; transform: none; } }
@keyframes idx-nuvem-pula { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-7%) scale(.96, 1.05); } 62% { transform: translateY(0) scale(1.05, .95); } 100% { transform: none; } }
.idx-raio { fill: var(--idx-brilho); transform-box: fill-box; transform-origin: center; }
.idx-entra { animation: idx-entra 320ms cubic-bezier(.23, 1, .32, 1) 60ms backwards; }
.idx-sai { animation: idx-sai 260ms cubic-bezier(.23, 1, .32, 1) both; }
.idx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.idx-pausado, .idx-pausado * { animation-play-state: paused !important; }
@keyframes idx-entra { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }
@keyframes idx-sai { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(2px); } }
@keyframes idx-pontos { 0%, 80%, 100% { opacity: .35; transform: scale(.7); } 40% { opacity: 1; transform: scale(1); } }
@keyframes idx-flut { 0%, 100% { opacity: .45; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(3px, -4px); } }
@keyframes idx-piscar { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes idx-fala { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
@keyframes idx-brilha { 0%, 100% { transform: scale(.7); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .idx-raiz *, .idx-raiz { animation: none !important; transition: none !important; }
}

/* =========================================================
   Mascote flutuante: acompanha a visita em todas as páginas
   ========================================================= */
.idx-amigo { position: fixed; right: 22px; bottom: 22px; z-index: 65; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; font-family: var(--display, "Urbanist", system-ui, sans-serif); }
.idx-amigo > * { pointer-events: auto; }
.idx-amigo-m { position: relative; }
.idx-amigo-m .idx-raiz { filter: drop-shadow(0 10px 14px rgba(70,24,120,.22)); }
.idx-amigo-x { position: absolute; top: -6px; right: -6px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink-3, #5C5873); box-shadow: 0 0 0 1px rgba(20,12,51,.1), 0 4px 10px -4px rgba(20,12,51,.3); opacity: 0; transform: scale(.8); transition: opacity 160ms ease, transform 200ms cubic-bezier(.23, 1, .32, 1); }
.idx-amigo-x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.idx-amigo:hover .idx-amigo-x, .idx-amigo-x:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .idx-amigo-x { opacity: 1; transform: none; width: 22px; height: 22px; } }

/* balão de fala: sai da nuvem, com a origem no canto que aponta para ela */
.idx-balao { position: relative; width: min(290px, calc(100vw - 120px)); margin-bottom: 30px; padding: 14px 16px 14px; border-radius: 18px 18px 6px 18px; background: #fff; box-shadow: 0 0 0 1px rgba(20,12,51,.07), 0 22px 44px -18px rgba(70,24,120,.4); color: var(--ink, #140C33); transform-origin: 100% 100%; opacity: 0; transform: translateY(6px) scale(.94); visibility: hidden; transition: opacity 200ms ease, transform 320ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear 320ms; }
.idx-balao.on { opacity: 1; transform: none; visibility: visible; transition: opacity 200ms ease, transform 320ms cubic-bezier(.23, 1, .32, 1), visibility 0s; }
.idx-balao-t { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; color: var(--ink, #140C33); }
.idx-balao-t b { color: #7A2CBF; font-weight: 800; }
.idx-balao-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.idx-balao-a a, .idx-balao-a button { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border-radius: 100px; border: 0; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 200ms ease; }
.idx-balao-a a:active, .idx-balao-a button:active { transform: scale(.97); }
.idx-balao-a .p { background: #7A2CBF; color: #fff; }
.idx-balao-a .s { background: #F3ECFA; color: #5B1F91; }
@media (hover: hover) and (pointer: fine) { .idx-balao-a .p:hover { background: #64239E; } .idx-balao-a .s:hover { background: #ECE0F8; } }

/* escondido: vira uma aba na borda, para quem quiser chamar de volta */
.idx-aba { position: fixed; right: 0; bottom: 120px; z-index: 65; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 9px; border: 0; border-radius: 12px 0 0 12px; background: #7A2CBF; color: #fff; font: inherit; font-size: 13px; font-weight: 700; box-shadow: 0 10px 22px -10px rgba(70,24,120,.6); cursor: pointer; transform: translateX(calc(100% - 36px)); transition: transform 320ms cubic-bezier(.23, 1, .32, 1); }
.idx-aba svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.idx-aba:hover, .idx-aba:focus-visible { transform: none; }
.idx-aba[hidden] { display: none; }

/* entrada: sobe do canto, só na primeira página da visita */
@media (prefers-reduced-motion: no-preference) {
  .idx-amigo.chega .idx-amigo-m { animation: idx-chega 700ms cubic-bezier(.23, 1, .32, 1) both; }
}
@keyframes idx-chega { 0% { opacity: 0; transform: translateY(90px) scale(.7); } 60% { opacity: 1; transform: translateY(-8px) scale(1.04); } 100% { opacity: 1; transform: none; } }

/* no celular, acima da barra fixa do WhatsApp */
@media (max-width: 1020px) {
  .idx-amigo { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); }
  .idx-aba { bottom: 150px; }
}
@media (max-width: 560px) {
  .idx-balao { margin-bottom: 20px; padding: 12px 14px; }
  .idx-balao-t { font-size: 14px; }
}
@media print { .idx-amigo, .idx-aba { display: none; } }
.idx-amigo[hidden] { display: none; }