/* KFaces Step 44 — Floating AI Voice Agent */
.kf-floating-voice-agent,
.kf-floating-voice-agent *{
  box-sizing:border-box;
}

.kf-floating-voice-agent{
  position:fixed;
  z-index:9998;
  left:max(22px,calc((100vw - 1280px)/2 + 22px));
  bottom:24px;
  width:330px;
  border:1px solid rgba(77,199,244,.26);
  border-radius:20px;
  background:
    linear-gradient(145deg,rgba(7,33,53,.96),rgba(10,50,78,.96));
  box-shadow:
    0 24px 60px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transform:translateY(18px);
  opacity:0;
  pointer-events:none;
  transition:
    opacity .35s ease,
    transform .35s ease,
    box-shadow .25s ease;
}

.kf-floating-voice-agent.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.kf-floating-voice-agent.is-scrolling{
  box-shadow:
    0 30px 75px rgba(0,0,0,.40),
    0 0 0 1px rgba(53,189,244,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.kf-floating-voice-agent__close{
  position:absolute;
  z-index:5;
  top:9px;
  left:9px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  background:rgba(3,20,33,.68);
  color:#d9edf6;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:.2s ease;
}

.kf-floating-voice-agent__close:hover{
  color:#fff;
  border-color:rgba(53,189,244,.45);
  background:#0d3551;
}

.kf-floating-voice-agent__link{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:14px;
  align-items:center;
  min-height:166px;
  padding:14px 16px 14px 12px;
  color:#fff;
  text-decoration:none;
  overflow:hidden;
  border-radius:20px;
}

.kf-floating-voice-agent__visual{
  position:relative;
  width:132px;
  height:132px;
  display:grid;
  place-items:center;
}

.kf-floating-voice-agent__visual img{
  position:relative;
  z-index:2;
  width:130px;
  height:130px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.25));
  animation:kfVoiceAgentFloat 4.6s ease-in-out infinite;
  transform-origin:center;
}

.kf-floating-voice-agent__ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(53,189,244,.25);
  pointer-events:none;
}

.kf-floating-voice-agent__ring.ring-one{
  width:112px;
  height:112px;
  animation:kfVoiceAgentRing 2.8s ease-out infinite;
}

.kf-floating-voice-agent__ring.ring-two{
  width:138px;
  height:138px;
  border-color:rgba(32,223,160,.16);
  animation:kfVoiceAgentRing 2.8s 1.2s ease-out infinite;
}

.kf-floating-voice-agent__content{
  min-width:0;
  text-align:right;
  direction:rtl;
}

.kf-floating-voice-agent__badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  padding:5px 8px;
  border:1px solid rgba(32,223,160,.26);
  border-radius:999px;
  background:rgba(32,223,160,.07);
  color:#bfffe9;
  font-size:9px;
  font-weight:800;
}

.kf-floating-voice-agent__badge i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#20dfa0;
  box-shadow:0 0 0 0 rgba(32,223,160,.55);
  animation:kfVoiceAgentLive 1.7s infinite;
}

.kf-floating-voice-agent__content strong{
  display:block;
  color:#fff;
  font-size:15px;
  line-height:1.55;
}

.kf-floating-voice-agent__content small{
  display:block;
  margin-top:5px;
  color:#a9c2d1;
  font-size:10px;
  line-height:1.7;
}

.kf-floating-voice-agent__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:8px 11px;
  border-radius:8px;
  background:linear-gradient(135deg,#188bd4,#35bdf4);
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(24,139,212,.22);
  transition:.22s ease;
}

.kf-floating-voice-agent__cta svg{
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  transform:scaleX(-1);
}

.kf-floating-voice-agent__link:hover .kf-floating-voice-agent__cta{
  transform:translateY(-2px);
  box-shadow:0 13px 28px rgba(24,139,212,.32);
}

.kf-floating-voice-agent__link:hover .kf-floating-voice-agent__visual img{
  animation-play-state:paused;
  transform:translateY(-5px) scale(1.035);
}

@keyframes kfVoiceAgentFloat{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-8px) rotate(1deg)}
}

@keyframes kfVoiceAgentRing{
  0%{transform:scale(.75);opacity:.65}
  100%{transform:scale(1.18);opacity:0}
}

@keyframes kfVoiceAgentLive{
  0%{box-shadow:0 0 0 0 rgba(32,223,160,.55)}
  70%{box-shadow:0 0 0 7px rgba(32,223,160,0)}
  100%{box-shadow:0 0 0 0 rgba(32,223,160,0)}
}

@media(max-width:900px){
  .kf-floating-voice-agent{
    left:16px;
    bottom:16px;
    width:300px;
  }

  .kf-floating-voice-agent__link{
    grid-template-columns:115px 1fr;
    min-height:148px;
  }

  .kf-floating-voice-agent__visual{
    width:115px;
    height:115px;
  }

  .kf-floating-voice-agent__visual img{
    width:112px;
    height:112px;
  }
}

@media(max-width:650px){
  .kf-floating-voice-agent{
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
    border-radius:16px;
  }

  .kf-floating-voice-agent__link{
    grid-template-columns:92px 1fr;
    gap:10px;
    min-height:116px;
    padding:10px 13px 10px 8px;
    border-radius:16px;
  }

  .kf-floating-voice-agent__visual{
    width:92px;
    height:92px;
  }

  .kf-floating-voice-agent__visual img{
    width:90px;
    height:90px;
  }

  .kf-floating-voice-agent__ring.ring-one{
    width:80px;
    height:80px;
  }

  .kf-floating-voice-agent__ring.ring-two{
    width:96px;
    height:96px;
  }

  .kf-floating-voice-agent__content strong{
    font-size:13px;
  }

  .kf-floating-voice-agent__content small{
    font-size:9px;
  }

  .kf-floating-voice-agent__cta{
    margin-top:7px;
    padding:7px 9px;
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .kf-floating-voice-agent *,
  .kf-floating-voice-agent *::before,
  .kf-floating-voice-agent *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* STEP 45 — PREMIUM VOICE WIDGET ONLY
   تغيير مظهر بطاقة الرد الآلي فقط دون المساس بالموقع. */

.kf-floating-voice-agent{
  border:1px solid rgba(75,213,255,.42);
  background:
    radial-gradient(circle at 24% 32%,rgba(32,227,168,.16),transparent 34%),
    radial-gradient(circle at 85% 18%,rgba(25,195,255,.20),transparent 36%),
    linear-gradient(145deg,#071c33 0%,#103b63 52%,#1e5d8f 100%);
  box-shadow:
    0 28px 70px rgba(3,16,30,.46),
    0 0 0 1px rgba(255,255,255,.04),
    0 0 34px rgba(25,195,255,.16),
    inset 0 1px 0 rgba(255,255,255,.09);
  overflow:hidden;
}

.kf-floating-voice-agent::before{
  content:"";
  position:absolute;
  inset:-35%;
  pointer-events:none;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 18%,
      rgba(25,195,255,.16) 22%,
      transparent 28% 58%,
      rgba(32,227,168,.14) 63%,
      transparent 70%
    );
  filter:blur(8px);
  animation:kfPremiumHalo 14s linear infinite;
}

.kf-floating-voice-agent::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background-image:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.55) 0 1px,transparent 1.7px),
    radial-gradient(circle at 72% 28%,rgba(32,227,168,.65) 0 1px,transparent 1.8px),
    radial-gradient(circle at 82% 72%,rgba(25,195,255,.55) 0 1px,transparent 1.7px),
    radial-gradient(circle at 32% 82%,rgba(255,255,255,.42) 0 1px,transparent 1.7px);
  background-size:88px 88px,106px 106px,96px 96px,118px 118px;
  animation:kfPremiumParticles 11s linear infinite;
}

.kf-floating-voice-agent__link{
  position:relative;
  z-index:2;
  background:
    linear-gradient(120deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
}

.kf-floating-voice-agent__visual::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(25,195,255,.30) 0%,rgba(32,227,168,.15) 38%,transparent 72%);
  filter:blur(8px);
  animation:kfPremiumGlow 2.8s ease-in-out infinite;
}

.kf-floating-voice-agent__visual::after{
  content:"";
  position:absolute;
  width:145px;
  height:145px;
  border-radius:50%;
  border:1px dashed rgba(93,223,255,.28);
  animation:kfPremiumOrbit 13s linear infinite;
}

.kf-floating-voice-agent__visual img{
  filter:
    drop-shadow(0 16px 26px rgba(0,0,0,.34))
    drop-shadow(0 0 14px rgba(25,195,255,.20));
}

.kf-floating-voice-agent__badge{
  color:#d8fff3;
  border-color:rgba(32,227,168,.38);
  background:
    linear-gradient(135deg,rgba(32,227,168,.16),rgba(25,195,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(32,227,168,.08);
}

.kf-floating-voice-agent__content strong{
  color:#ffffff;
  text-shadow:0 4px 18px rgba(0,0,0,.26);
}

.kf-floating-voice-agent__content small{
  color:#c2d9e6;
}

.kf-floating-voice-agent__cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#19c3ff 0%,#20e3a8 100%);
  color:#06253a;
  box-shadow:
    0 12px 28px rgba(25,195,255,.25),
    0 0 22px rgba(32,227,168,.11);
}

.kf-floating-voice-agent__cta::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.42),transparent 64%);
  transform:translateX(-75%) rotate(12deg);
  animation:kfPremiumSweep 3.2s infinite;
}

.kf-floating-voice-agent__cta span,
.kf-floating-voice-agent__cta svg{
  position:relative;
  z-index:2;
}

.kf-floating-voice-agent__close{
  z-index:7;
  background:rgba(4,22,37,.78);
  border-color:rgba(117,221,255,.24);
}

.kf-floating-voice-agent:hover{
  transform:translateY(-6px);
  border-color:rgba(102,225,255,.62);
  box-shadow:
    0 34px 82px rgba(3,16,30,.54),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 42px rgba(25,195,255,.25),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.kf-floating-voice-agent:hover .kf-floating-voice-agent__visual img{
  transform:translateY(-5px) scale(1.035) rotate(1deg);
}

.kf-floating-voice-agent:hover .kf-floating-voice-agent__cta{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 16px 34px rgba(25,195,255,.34),
    0 0 28px rgba(32,227,168,.18);
}

.kf-floating-voice-agent.is-scrolling{
  box-shadow:
    0 36px 86px rgba(3,16,30,.58),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 46px rgba(25,195,255,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
}

@keyframes kfPremiumHalo{
  to{transform:rotate(360deg)}
}

@keyframes kfPremiumParticles{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:88px -88px,-106px 106px,96px 96px,-118px -118px}
}

@keyframes kfPremiumGlow{
  0%,100%{transform:scale(.92);opacity:.55}
  50%{transform:scale(1.08);opacity:1}
}

@keyframes kfPremiumOrbit{
  to{transform:rotate(360deg)}
}

@keyframes kfPremiumSweep{
  0%,58%{transform:translateX(-78%) rotate(12deg)}
  82%,100%{transform:translateX(82%) rotate(12deg)}
}

@media(max-width:650px){
  .kf-floating-voice-agent__visual::after{
    width:101px;
    height:101px;
  }

  .kf-floating-voice-agent:hover{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .kf-floating-voice-agent::before,
  .kf-floating-voice-agent::after,
  .kf-floating-voice-agent__visual::before,
  .kf-floating-voice-agent__visual::after,
  .kf-floating-voice-agent__cta::before{
    animation:none !important;
  }
}