/* jarvis_bot.css — Robô professor IA flutuante (versão LIMPA, sem fundo)
 * --------------------------------------------------------------
 * Robô flutuante transparente, arrastável.
 * Apenas 2 botões: ▶ Play/Pause · × Fechar (volta ao FAB)
 * Sem painel, sem nome JARVIS, sem barra de progresso, sem rótulos de bloco.
 * Aparece em TODAS as páginas via location.hash.
 * Animações via CSS transform (GPU). Zero libraries.
 */

/* ─────────────────────────────────────────────────────────── */
/* CONTAINER raiz — sem fundo, totalmente transparente         */
/* ─────────────────────────────────────────────────────────── */
#jarvisBot{
  position:fixed; right:32px; top:140px;
  z-index:99500;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
#jarvisBot *{ box-sizing:border-box }

/* ─────────────────────────────────────────────────────────── */
/* FAB — estado pequeno (modo recolhido)                       */
/* ─────────────────────────────────────────────────────────── */
.jb-fab{
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,#8b5cf6,#22d3ee);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(139,92,246,.50), inset 0 1px 0 rgba(255,255,255,.20);
  cursor:pointer; position:relative;
  border:none; padding:0;
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;
  animation:jbFabPulse 2.6s ease-in-out infinite;
  pointer-events:auto;
}
.jb-fab:hover{ transform:scale(1.08); box-shadow:0 14px 36px rgba(139,92,246,.65) }
.jb-fab svg{ width:26px; height:26px; color:#fff; filter:drop-shadow(0 0 4px rgba(255,255,255,.4)) }
.jb-fab::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid rgba(34,211,238,.5);
  animation:jbFabRing 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes jbFabPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes jbFabRing{ 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.5);opacity:0} }

.jb-fab-badge{
  position:absolute; top:-3px; right:-3px;
  width:14px; height:14px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.6);
  border:2px solid #0a0e1a;
  display:none;
}
.jb-fab.has-script .jb-fab-badge{ display:block }

#jarvisBot.open .jb-fab{ display:none }

/* ─────────────────────────────────────────────────────────── */
/* WRAP — robô limpo arrastável (sem fundo, sem borda)         */
/* ─────────────────────────────────────────────────────────── */
.jb-clean-wrap{
  display:none;
  position:relative;
  width:180px;
  flex-direction:column; align-items:center;
  cursor:grab;
  pointer-events:auto;
  background:transparent;
  border:none;
  padding:0;
}
#jarvisBot.open .jb-clean-wrap{ display:flex }
.jb-clean-wrap:active{ cursor:grabbing }
.jb-clean-wrap.dragging{ cursor:grabbing; filter:brightness(1.05) }

/* ─────────────────────────────────────────────────────────── */
/* STAGE do robô — flutua livre                                */
/* ─────────────────────────────────────────────────────────── */
.jb-stage{
  width:180px; height:200px;
  display:flex; align-items:flex-end; justify-content:center;
  position:relative;
  filter:drop-shadow(0 14px 28px rgba(139,92,246,.45)) drop-shadow(0 0 18px rgba(34,211,238,.20));
  pointer-events:none; /* drag pelo wrapper */
  overflow:visible;
}
.jb-robot{
  animation:jbFloat 3.8s ease-in-out infinite;
  transform-origin:center center;
  will-change:transform;
}
/* ── Float padrão (idle / não-falando): sutil, só sobe/desce ───── */
@keyframes jbFloat{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) }
  50%   { transform:translate3d(0,-8px,0) rotate(.5deg) }
}
.jb-robot svg{ width:160px; height:185px; display:block; overflow:visible }

/* ── BALANÇO curto interno enquanto voa (talking) ──────────
   O container inteiro é movido por JS pelo viewport.
   Aqui só o corpo balança suave + inclina na direção do voo
   (via CSS var --fly-tilt setado pelo JS). */
.jb-robot.talking{
  animation:jbBodyWobble 1.6s ease-in-out infinite alternate !important;
}
@keyframes jbBodyWobble{
  0%   { transform:translate3d(0, 0, 0)        rotate(var(--fly-tilt, 0deg)) }
  50%  { transform:translate3d(0, -5px, 0)     rotate(calc(var(--fly-tilt, 0deg) + 1.5deg)) }
  100% { transform:translate3d(0, 0, 0)        rotate(var(--fly-tilt, 0deg)) }
}
/* Container voando pela tela: transição suave dos limites
   pra evitar pulos quando JS atualiza posição direto. */
#jarvisBot.jb-flying{
  transition:none; /* JS controla a interpolação manualmente */
}
/* Boost extra na "asa" do braço durante o voo (mais energia) */
.jb-robot.talking .jb-arm-l{ animation-duration:.9s !important }

/* ── Sombra acompanha eixo X do voo (perspectiva real) ───────── */
.jb-shadow{
  position:absolute; bottom:6px; left:50%;
  width:90px; height:14px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(139,92,246,.35),transparent 70%);
  filter:blur(4px);
  transform:translateX(-50%);
  animation:jbShadow 3.8s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes jbShadow{
  0%,100%{ transform:translateX(-50%) scale(1);   opacity:.8 }
  50%   { transform:translateX(-50%) scale(.85); opacity:.5 }
}
/* Quando voando: sombra desliza junto + diminui na altura máxima */
.jb-robot.talking ~ .jb-shadow,
.jb-stage:has(.jb-robot.talking) .jb-shadow{
  animation:jbShadowFly 6.2s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes jbShadowFly{
  0%   { transform:translateX(-50%) scale(1);     opacity:.65 }
  12%  { transform:translate(calc(-50% + 18px),0) scale(.85); opacity:.45 }
  25%  { transform:translate(calc(-50% + 28px),0) scale(.7);  opacity:.32 }
  37%  { transform:translate(calc(-50% + 20px),0) scale(.9);  opacity:.55 }
  50%  { transform:translateX(-50%) scale(1);     opacity:.7 }
  62%  { transform:translate(calc(-50% - 20px),0) scale(.85); opacity:.45 }
  75%  { transform:translate(calc(-50% - 28px),0) scale(.7);  opacity:.32 }
  87%  { transform:translate(calc(-50% - 15px),0) scale(.9);  opacity:.55 }
  100% { transform:translateX(-50%) scale(1);     opacity:.65 }
}

/* partes anim do robô */
.jb-eye{ transform-origin:center; animation:jbBlink 4.5s ease-in-out infinite }
@keyframes jbBlink{
  0%,46%,50%,96%,100%{ transform:scaleY(1) }
  48%,98%{ transform:scaleY(.05) }
}
.jb-antenna{
  transform-origin:60px 14px;
  animation:jbAntenna 4s linear infinite;
  filter:drop-shadow(0 0 4px #22d3ee);
}
@keyframes jbAntenna{
  0%{ transform:rotate(0deg)   translateY(0)  }
  50%{transform:rotate(180deg) translateY(-2px) }
  100%{transform:rotate(360deg) translateY(0) }
}
.jb-core{
  transform-origin:center;
  animation:jbCore 1.8s ease-in-out infinite;
  filter:drop-shadow(0 0 8px #22d3ee);
}
@keyframes jbCore{
  0%,100%{ opacity:.85; transform:scale(.95) }
  50%   { opacity:1; transform:scale(1.08) }
}
.jb-mouth{ transform-origin:center; transform-box:fill-box }
.jb-robot.talking .jb-mouth{ animation:jbMouth .32s ease-in-out infinite alternate }
@keyframes jbMouth{
  0%   { transform:scaleY(.4) }
  25%  { transform:scaleY(1.1) }
  50%  { transform:scaleY(.7) }
  75%  { transform:scaleY(1.3) }
  100% { transform:scaleY(.5) }
}
.jb-arm-l{ transform-origin:42px 110px; transform-box:fill-box }
.jb-robot.talking .jb-arm-l{ animation:jbArm 1.2s ease-in-out infinite }
@keyframes jbArm{ 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-12deg)} }

/* ─────────────────────────────────────────────────────────── */
/* CONTROLES — discreto, semi-transparente                     */
/* ─────────────────────────────────────────────────────────── */
.jb-clean-ctrls{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:-4px;
  pointer-events:auto;
}
.jb-clean-btn{
  width:42px; height:42px; border-radius:50%;
  background:rgba(8,12,28,.55);
  border:1.5px solid rgba(167,139,250,.40);
  color:#c4b5fd;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:all .2s ease;
  padding:0;
  pointer-events:auto;
}
.jb-clean-btn svg{ width:16px; height:16px; display:block }
.jb-clean-btn:hover{
  background:rgba(15,23,42,.75);
  border-color:rgba(167,139,250,.75);
  color:#fff;
  box-shadow:0 0 14px rgba(139,92,246,.45);
  transform:scale(1.06);
}
.jb-clean-btn.play{
  background:linear-gradient(135deg,rgba(34,197,94,.25),rgba(34,211,238,.20));
  border-color:rgba(34,197,94,.55);
  color:#86efac;
}
.jb-clean-btn.play:hover{
  background:linear-gradient(135deg,rgba(34,197,94,.40),rgba(34,211,238,.32));
  box-shadow:0 0 14px rgba(34,197,94,.50);
}
.jb-clean-btn.playing{
  background:linear-gradient(135deg,rgba(251,191,36,.25),rgba(167,139,250,.20));
  border-color:rgba(251,191,36,.55);
  color:#fbbf24;
  animation:jbPulseBtn 2s ease-in-out infinite;
}
@keyframes jbPulseBtn{
  0%,100%{ box-shadow:0 0 0 0 rgba(251,191,36,.45) }
  50%   { box-shadow:0 0 0 6px rgba(251,191,36,0) }
}
.jb-clean-btn[disabled]{ opacity:.35; cursor:not-allowed; pointer-events:none }

/* ─────────────────────────────────────────────────────────── */
/* RESPONSIVO MOBILE                                           */
/* ─────────────────────────────────────────────────────────── */
@media(max-width:600px){
  #jarvisBot{ right:14px; top:90px }
  .jb-fab{ width:48px; height:48px }
  .jb-fab svg{ width:22px; height:22px }
  .jb-clean-wrap{ width:140px }
  .jb-stage{ width:140px; height:160px }
  .jb-robot svg{ width:120px; height:145px }
  .jb-clean-btn{ width:38px; height:38px }
}

/* respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .jb-fab, .jb-fab::after, .jb-robot, .jb-shadow,
  .jb-eye, .jb-antenna, .jb-core, .jb-mouth, .jb-arm-l, .jb-clean-btn.playing{
    animation:none !important;
  }
}