/* =========================================================
   AION FLOAT™ v1.4
   Componente flotante reutilizable para Sistema FALCO®
   CSS limpio · Desktop + Mobile
========================================================= */

/* =========================================================
   1. Contenedor principal
========================================================= */

.aion-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:99999;

  width:112px;
  height:112px;

  display:grid;
  place-items:center;

  pointer-events:auto;
}

.aion-float-being{
  position:relative;

  width:112px;
  height:112px;

  display:grid;
  place-items:center;

  cursor:pointer;

  --aion-float-color:#eaffff;
  --aion-float-glow:rgba(0,210,255,.72);

  --eye-x:0px;
  --eye-y:0px;

  /* Velocidades controladas por Animation Engine™ */
  --breath-speed:4.8s;
  --halo-speed:18s;

  transform:scale(var(--aion-scale,1));
}


/* =========================================================
   2. Halo
========================================================= */

.aion-float-halo{
  position:absolute;

  width:108px;
  height:108px;

  border-radius:50%;
  border:1px solid rgba(100,225,255,.34);

  box-shadow:
    0 0 22px rgba(0,210,255,.35),
    inset 0 0 22px rgba(0,210,255,.12);

  animation:aionFloatHalo var(--halo-speed,18s) linear infinite;
}

.aion-float-halo::before{
  content:"";
  position:absolute;
  inset:14px;

  border-radius:50%;
  border:1px solid rgba(180,245,255,.18);

  opacity:var(--halo-opacity,.7);
}


/* =========================================================
   3. Esfera
========================================================= */

.aion-float-sphere{
  position:relative;

  width:78px;
  height:78px;

  border-radius:50%;
  overflow:hidden;

  border:1px solid rgba(200,250,255,.7);

  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.92), transparent 10%),
    radial-gradient(circle at 68% 24%, rgba(170,245,255,.45), transparent 13%),
    radial-gradient(circle at 50% 54%, rgba(0,175,255,.22), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(6,22,42,.9), rgba(0,5,14,.97) 72%);

  box-shadow:
    inset 8px 10px 18px rgba(255,255,255,.16),
    inset -12px -18px 30px rgba(0,0,0,.6),
    inset 0 0 20px rgba(0,200,255,.24),
    0 0 18px rgba(180,245,255,.85),
    0 0 42px rgba(0,210,255,.58),
    0 0 82px rgba(0,140,255,.32);

  animation:aionFloatBreath var(--breath-speed,4.8s) ease-in-out infinite;
}

.aion-float-sphere::before{
  content:"";
  position:absolute;

  left:18px;
  top:10px;

  width:32px;
  height:12px;

  border-radius:50%;
  background:rgba(255,255,255,.34);

  filter:blur(4px);
  transform:rotate(-24deg);
}


/* =========================================================
   4. Ojos
========================================================= */

.aion-float-eyes{
  position:absolute;

  left:50%;
  top:52%;

  width:38px;
  height:30px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  transform:
    translate(-50%,-50%)
    translate(var(--eye-x), var(--eye-y));

  transition:transform .18s ease;
}

.aion-float-eye{
  width:10px;
  height:28px;

  border-radius:999px;

  background:
    radial-gradient(
      circle at 40% 24%,
      #fff 0%,
      #efffff 40%,
      #a7f6ff 70%,
      rgba(0,200,255,.75) 100%
    );

  box-shadow:
    0 0 8px rgba(255,255,255,.95),
    0 0 18px rgba(0,220,255,.9),
    0 0 32px rgba(0,150,255,.54);

  transition:.22s ease;
}


/* =========================================================
   5. Label
========================================================= */

.aion-float-label{
  position:absolute;

  right:104px;
  bottom:34px;

  min-width:150px;

  padding:10px 14px;

  border:1px solid rgba(0,210,255,.24);
  border-radius:18px;

  background:rgba(2,10,20,.78);
  color:#dff8ff;

  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;

  box-shadow:0 0 24px rgba(0,180,255,.18);
  backdrop-filter:blur(10px);

  opacity:0;
  transform:translateX(8px);

  pointer-events:none;
  transition:.25s ease;
}

.aion-float:hover .aion-float-label{
  opacity:1;
  transform:translateX(0);
}


/* =========================================================
   6. Estados visuales base
========================================================= */

.aion-float-being.is-blinking .aion-float-eye{
  height:4px;
}

.aion-float-being.is-thinking .aion-float-eye,
.aion-float-being[data-state="thinking"] .aion-float-eye{
  height:12px;
  border-radius:999px;
}

.aion-float-being.is-speaking .aion-float-eye,
.aion-float-being[data-state="speaking"] .aion-float-eye{
  animation:aionFloatSpeaking .42s ease-in-out infinite alternate;
}

/* Speaking visible: voz + cuerpo + halo coordinados */
.aion-float-being[data-state="speaking"]{
  filter:brightness(1.16);
}

.aion-float-being[data-state="speaking"] .aion-float-sphere{
  box-shadow:
    inset 8px 10px 18px rgba(255,255,255,.22),
    inset -12px -18px 30px rgba(0,0,0,.56),
    inset 0 0 26px rgba(0,220,255,.38),
    0 0 24px rgba(210,252,255,.98),
    0 0 58px rgba(0,220,255,.82),
    0 0 104px rgba(0,150,255,.52);
}

.aion-float-being[data-state="speaking"] .aion-float-halo{
  border-color:rgba(155,242,255,.82);
  box-shadow:
    0 0 34px rgba(0,225,255,.82),
    0 0 72px rgba(0,170,255,.48),
    inset 0 0 30px rgba(0,225,255,.30);
}

.aion-float-being[data-state="speaking"] .aion-float-presence-field{
  opacity:.58;
  filter:blur(6px) brightness(1.35);
}

.aion-float-being[data-state="speaking"] .aion-float-sensor{
  opacity:.88;
  filter:brightness(1.38);
}

.aion-float-being[data-state="idle"]{
  --aion-float-glow:rgba(0,210,255,.72);
}

.aion-float-being[data-state="listening"] .aion-float-halo{
  box-shadow:
    0 0 28px rgba(0,220,255,.52),
    inset 0 0 24px rgba(0,220,255,.18);
}

.aion-float-being[data-state="sleep"] .aion-float-eye{
  height:4px;
  opacity:.7;
}

.aion-float-being[data-state="warning"]{
  --aion-float-glow:rgba(181,140,255,.72);
}

.aion-float-being[data-state="warning"] .aion-float-halo{
  border-color:rgba(181,140,255,.55);
  box-shadow:
    0 0 30px rgba(181,140,255,.55),
    inset 0 0 24px rgba(181,140,255,.18);
}

.aion-float-being[data-state="success"]{
  --aion-float-glow:rgba(98,230,163,.72);
}


/* =========================================================
   7. Sensores + Presence Field
========================================================= */

.aion-float-sensors{
  position:absolute;
  inset:0;

  pointer-events:none;
  z-index:3;
}

.aion-float-sensor{
  position:absolute;
  top:50%;

  width:24px;
  height:58px;

  opacity:.34;

  transform:translateY(-50%);

  transition:
    opacity .7s ease,
    transform .7s ease,
    filter .7s ease;
}

.aion-float-sensor::before,
.aion-float-sensor::after{
  content:"";
  position:absolute;
  inset:0;

  border-radius:999px;
  pointer-events:none;
}

.aion-float-sensor::before{
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255,255,255,.05) 14%,
      var(--aion-float-glow) 50%,
      rgba(255,255,255,.05) 86%,
      transparent 100%
    );

  filter:
    blur(.2px)
    drop-shadow(0 0 8px var(--aion-float-glow))
    drop-shadow(0 0 18px var(--aion-float-glow));
}

.aion-float-sensor::after{
  background:
    radial-gradient(
      ellipse at center,
      var(--aion-float-glow),
      transparent 66%
    );

  filter:blur(10px);
  opacity:.42;
}

.aion-float-sensor-left{
  left:4px;
  clip-path:polygon(0 0, 58% 0, 38% 100%, 0 100%);
}

.aion-float-sensor-right{
  right:4px;
  clip-path:polygon(42% 0, 100% 0, 100% 100%, 62% 100%);
  animation-delay:.35s;
}

.aion-float-presence-field{
  position:absolute;
  inset:13px;

  border-radius:50%;

  pointer-events:none;
  z-index:2;

  background:
    radial-gradient(
      circle at center,
      transparent 44%,
      var(--aion-float-glow) 58%,
      transparent 72%
    );

  opacity:.18;
  filter:blur(8px);

  animation:aionFloatPresenceField 8s ease-in-out infinite;
}

.aion-float-being[data-state="idle"] .aion-float-sensor{
  opacity:.24;
}

.aion-float-being[data-state="listening"] .aion-float-sensor{
  opacity:.62;
  filter:brightness(1.18);
}

.aion-float-being[data-state="thinking"] .aion-float-sensor{
  opacity:.46;
  animation:aionFloatSensorBreath 4.8s ease-in-out infinite;
}

.aion-float-being[data-state="speaking"] .aion-float-sensor{
  opacity:.88;
  animation:aionFloatSensorSpeak .72s ease-in-out infinite;
}

.aion-float-being[data-state="sleep"] .aion-float-sensor{
  opacity:.10;
  filter:grayscale(1) brightness(.7);
}

.aion-float-being[data-state="listening"] .aion-float-presence-field{
  opacity:.30;
}

.aion-float-being[data-state="thinking"] .aion-float-presence-field{
  opacity:.26;
  animation-duration:10s;
}

.aion-float-being[data-state="speaking"] .aion-float-presence-field{
  opacity:.58;
  animation-duration:2.4s;
}

.aion-float-being[data-state="sleep"] .aion-float-presence-field{
  opacity:.05;
}


/* =========================================================
   8. Guide Message
========================================================= */

.aion-guide-message{
  position:absolute;

  right:112px;
  bottom:34px;

  width:260px;

  padding:14px 16px;

  border:1px solid rgba(0,210,255,.28);
  border-radius:18px;

  background:rgba(2,10,20,.86);
  color:#dff8ff;

  font-size:13px;
  line-height:1.45;

  box-shadow:0 0 28px rgba(0,180,255,.22);
  backdrop-filter:blur(12px);

  opacity:0;
  transform:translateX(10px);

  pointer-events:none;
  transition:.35s ease;
}

.aion-guide-message.is-visible{
  opacity:1;
  transform:translateX(0);
}


/* =========================================================
   9. Conversation Card
========================================================= */

.aion-conversation-card{
  position:absolute;

  right:120px;
  bottom:-70px;

  width:320px;
  max-height:min(520px, calc(100vh - 80px));

  overflow-y:auto;

  padding:20px;

  border:1px solid rgba(0,210,255,.28);
  border-radius:24px;

  background:rgba(2,10,20,.92);
  color:#dff8ff;

  box-shadow:0 0 34px rgba(0,180,255,.24);
  backdrop-filter:blur(16px);

  opacity:0;
  transform:translateX(14px) scale(.96);

  pointer-events:none;

  transition:.32s ease;
  z-index:100000;
}

.aion-conversation-card.is-visible{
  opacity:1;
  transform:translateX(0) scale(1);
  pointer-events:auto;
}

.aion-conversation-close{
  position:absolute;

  top:10px;
  right:12px;

  width:28px;
  height:28px;

  border:0;
  border-radius:50%;

  background:rgba(255,255,255,.08);
  color:#dff8ff;

  cursor:pointer;
  z-index:2;
}

.aion-conversation-kicker{
  color:#39d8ff;

  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;

  margin-bottom:8px;
}

.aion-conversation-card h3{
  margin:0 0 10px;
  font-size:20px;
}

.aion-conversation-card p{
  margin:0 0 16px;

  font-size:13px;
  line-height:1.5;

  color:rgba(223,248,255,.78);
}

.aion-conversation-options{
  display:grid;
  gap:8px;
  padding-right:4px;
}

.aion-conversation-options button{
  border:1px solid rgba(0,210,255,.22);
  border-radius:14px;

  background:rgba(0,160,220,.08);
  color:#dff8ff;

  padding:10px 12px;

  cursor:pointer;
  text-align:left;

  font-size:12px;
  font-weight:700;
}

.aion-conversation-options button:hover{
  background:rgba(0,210,255,.16);
}

.aion-conversation-card::-webkit-scrollbar{
  width:6px;
}

.aion-conversation-card::-webkit-scrollbar-thumb{
  background:rgba(0,210,255,.32);
  border-radius:999px;
}


/* =========================================================
   10. Animaciones
========================================================= */

@keyframes aionFloatBreath{
  0%,100%{
    transform:scale(.98) translateY(0);
    filter:brightness(.96);
  }

  50%{
    transform:scale(1.04) translateY(-2px);
    filter:brightness(1.18);
  }
}

@keyframes aionFloatHalo{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}

@keyframes aionFloatSpeaking{
  from{
    transform:scaleY(1);
    filter:brightness(1);
  }

  to{
    transform:scaleY(1.15);
    filter:brightness(1.45);
  }
}

@keyframes aionFloatSensorBreath{
  0%,100%{
    transform:translateY(-50%) scaleY(.985);
    filter:brightness(.96);
  }

  50%{
    transform:translateY(-50%) scaleY(1.025);
    filter:brightness(1.14);
  }
}

@keyframes aionFloatSensorSpeak{
  0%,100%{
    transform:translateY(-50%) scaleY(.96);
  }

  50%{
    transform:translateY(-50%) scaleY(1.06);
  }
}

@keyframes aionFloatPresenceField{
  0%,100%{
    transform:scale(.98) rotate(0deg);
  }

  50%{
    transform:scale(1.04) rotate(4deg);
  }
}


/* =========================================================
   11. Mobile
========================================================= */

@media(max-width:680px){

  .aion-float{
    right:16px;
    bottom:16px;

    transform:scale(.86);
    transform-origin:right bottom;
  }

  .aion-float-label,
  .aion-guide-message{
    display:none;
  }

  .aion-conversation-card{
    right:0 !important;
    bottom:125px !important;

    width:min(310px, 88vw) !important;
    max-height:46vh !important;

    overflow-y:auto !important;

    border-radius:22px !important;

    transform:none !important;
  }

  .aion-conversation-card.is-visible{
    transform:none !important;
  }

  .aion-conversation-options{
    max-height:none !important;
    overflow:visible !important;
  }

}