/* ═══════════════════════════════════════════════════════════════════════
   Smarty 3D — diagnosticato con Chrome DevTools live
   CHIAVE: perspective sul PARENT + border-radius non circolare
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PARENT: la perspective va sul CONTENITORE, non sull'elemento ────── */
#smarty-widget {
  perspective: 140px !important;
  perspective-origin: 50% 50% !important;
}

/* ── KEYFRAME principale: angoli grandi (±35°) su X e Y ─────────────── */
@keyframes smarty-float-3d {
  0%   {
    transform: rotateX(0deg)   rotateY(-35deg) translateY(0px);
    box-shadow:  14px 20px 40px rgba(27,107,58,0.65),
                  0   0   0  0px rgba(27,107,58,0.00);
  }
  25%  {
    transform: rotateX(28deg)  rotateY(14deg)  translateY(-11px);
    box-shadow:  -4px 24px 46px rgba(27,107,58,0.70),
                   0   0   0  9px rgba(27,107,58,0.16);
  }
  55%  {
    transform: rotateX(0deg)   rotateY(38deg)  translateY(-18px);
    box-shadow: -15px 28px 52px rgba(27,107,58,0.75),
                  0   0   0  13px rgba(27,107,58,0.20);
  }
  78%  {
    transform: rotateX(-24deg) rotateY(-10deg) translateY(-8px);
    box-shadow:   9px 22px 44px rgba(27,107,58,0.65),
                  0   0   0   5px rgba(27,107,58,0.12);
  }
  100% {
    transform: rotateX(0deg)   rotateY(-35deg) translateY(0px);
    box-shadow:  14px 20px 40px rgba(27,107,58,0.65),
                  0   0   0  0px rgba(27,107,58,0.00);
  }
}

/* ── KEYFRAME header avatar ──────────────────────────────────────────── */
@keyframes smarty-bob-3d {
  0%, 100% { transform: rotateY(-10deg) rotateX(4deg)  translateY(0px); }
  50%       { transform: rotateY(10deg)  rotateX(-4deg) translateY(-8px); }
}

/* ── KEYFRAME entrata messaggi ───────────────────────────────────────── */
@keyframes smarty-msg-in {
  from { transform: perspective(400px) translateZ(-60px) scale(0.75); opacity: 0; }
  to   { transform: perspective(400px) translateZ(0px)   scale(1);    opacity: 1; }
}

/* ── KEYFRAME apertura chat ──────────────────────────────────────────── */
@keyframes smarty-chat-appear {
  from { transform: perspective(700px) rotateX(12deg) scale(0.84) translateY(24px); opacity: 0; }
  to   { transform: perspective(700px) rotateX(0deg)  scale(1)    translateY(0px);  opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   BOTTONE TOGGLE — border-radius NON circolare per rendere visibile il 3D
   Un cerchio ruotato rimane visivamente un cerchio: serve uno shape che
   mostri la foreshortening prospettica sui lati
   ════════════════════════════════════════════════════════════════════════ */
#smarty-toggle {
  border-radius: 22px !important;         /* rounded-square: il 3D si VEDE */
  animation: smarty-float-3d 4.4s ease-in-out infinite !important;
  box-shadow: none !important;            /* azzerato, gestito dal keyframe */
  transform-style: preserve-3d !important;
  will-change: transform, box-shadow;
  overflow: visible !important;
  position: relative !important;
  background: linear-gradient(145deg, #1A7A42, #0f5a30) !important;
}

/* Riflesso luce speculare: spigolo in alto a sinistra */
#smarty-toggle::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.10) 30%,
    rgba(255,255,255,0.00) 60%,
    rgba(255,255,255,0.12) 100%
  );
  pointer-events: none;
  z-index: 3;
}

/* Ombra proiettata "al suolo" sotto il robot */
#smarty-toggle::before {
  content: '';
  position: absolute;
  bottom: -14px; left: 8px; right: 8px;
  height: 14px;
  background: radial-gradient(ellipse at center,
    rgba(27,107,58,0.55) 0%,
    rgba(27,107,58,0.00) 100%
  );
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
  z-index: -1;
  animation: smarty-ground-shadow 4.4s ease-in-out infinite;
}

@keyframes smarty-ground-shadow {
  0%   { transform: scaleX(0.7) translateX(8px);  opacity: 0.7; }
  55%  { transform: scaleX(1.2) translateX(-6px); opacity: 0.35; }
  100% { transform: scaleX(0.7) translateX(8px);  opacity: 0.7; }
}

/* Mouse tilt attivo */
#smarty-toggle.smarty-tilt-active {
  animation: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
   AVATAR HEADER — perspective sul suo parent diretto
   ════════════════════════════════════════════════════════════════════════ */
#smarty-avatar-header {
  animation: smarty-bob-3d 3.4s ease-in-out infinite !important;
  transform-style: preserve-3d;
  perspective: 180px;
}

/* ════════════════════════════════════════════════════════════════════════
   MESSAGGI
   ════════════════════════════════════════════════════════════════════════ */
.smarty-avatar-msg {
  animation: smarty-msg-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both !important;
}

/* ════════════════════════════════════════════════════════════════════════
   CHAT WINDOW
   ════════════════════════════════════════════════════════════════════════ */
#smarty-chat {
  transform-origin: bottom right;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.28s ease;
}
#smarty-chat.smarty-open {
  animation: smarty-chat-appear 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) both !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#smarty-chat.smarty-closed {
  transform: perspective(700px) rotateX(8deg) scale(0.83) translateY(24px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}