/* ==========================================================================
   این فایل عیناً همون CSS دکمه‌ی شناور (fab) هست که فرستاده شد — دست‌نخورده.
   هیچ کلاس یا انیمیشنی از این فایل تغییر نکرده.
   ========================================================================== */
:root{
  --fab-size: 88px;
  --fab-right: 24px;
  --fab-bottom: 24px;
  --shadow: 0 12px 28px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.16);
  --white-disc: #fff;
}

/* fixed corner + JS transforms */
.chat-fab-img{
  position: fixed;
  right: var(--fab-right);
  bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 99999;
  width: var(--fab-size);
  height: var(--fab-size);
  display: grid; place-items: center;
  cursor: pointer; outline: none; border: 0;
  transform: translate3d(var(--jx, 0px), calc(var(--ty, 0px) + var(--jy, 0px)), 0) scale(var(--s, 1));
  transform-origin: bottom right;
  will-change: transform, opacity;
  /* ترنزیشن نرم برای محو شدن بی نقص */
  transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* decorative tiny motions (X only) */
.chat-fab-img .drift-wrap{
  width: 100%; height: 100%;
  display: grid; place-items: center;
  animation: gentle-left-drift 18s ease-in-out infinite;
}
.chat-fab-img .sway-wrap{
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  animation: fab-sway 5.5s ease-in-out infinite, burst-sway 9s linear infinite;
}

/* disc under icon */
.chat-fab-img .disc{
  position:absolute; inset:0;
  background: var(--white-disc);
  border-radius: 50%;
  box-shadow: var(--shadow);
  animation: micro-pulse 3.8s ease-in-out infinite;
  z-index: 0;
}

/* tiny bob */
.chat-fab-img .bounce-wrap{
  position: relative;
  width: 70%; height: 70%;
  display: grid; place-items: center;
  z-index: 1;
  animation: fab-bounce 7s ease-in-out infinite;
  transform-origin: bottom right;
}

/* inner vibrate */
.chat-fab-img .inner{
  position: relative;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  z-index: 1;
  animation: ring-buzz 9s linear infinite;
  transform-origin: 50% 55%;
}

/* layers */
.chat-fab-img .layer{
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .2s ease;
  pointer-events: none;
}
.chat-fab-img .layer.base  { z-index: 1; }
.chat-fab-img .layer.hover { z-index: 2; opacity: 0; }

/* hover swap */
.chat-fab-img:hover .layer.hover,
.chat-fab-img:focus-visible .layer.hover{ opacity: 1; animation: none !important; }
.chat-fab-img:hover .layer.base,
.chat-fab-img:focus-visible .layer.base { opacity: 0; }

/* idle blink except while returning */
.chat-fab-img:not(:hover):not(.is-returning) .layer.hover{
  animation: fab-blink 8s linear infinite;
}

/* keyframes */
@keyframes gentle-left-drift{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(-12px)} }
@keyframes fab-sway{
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)}
  50%{transform:translateX(0)} 75%{transform:translateX(6px)}
}
@keyframes fab-bounce{
  0%,82%,100%{transform:translateY(0) scale(1)}
  84%{transform:translateY(-8px) scale(1.02)}
  88%{transform:translateY(0) scale(1)}
  90%{transform:translateY(-5px) scale(1.01) rotate(-1.2deg)}
  94%{transform:translateY(0) scale(1) rotate(0)}
}
@keyframes ring-buzz{
  0%,88%,100%{transform:rotate(0) translate(0,0)}
  89%{transform:rotate(-8deg) translate(-1px,0)}
  90%{transform:rotate(8deg) translate(1px,0)}
  91%{transform:rotate(-8deg) translate(-1px,0)}
  92%{transform:rotate(8deg) translate(1px,0)}
  93%{transform:rotate(-6deg) translate(-1px,0)}
  94%{transform:rotate(6deg) translate(1px,0)}
  95%{transform:rotate(-3deg) translate(-.5px,0)}
  96%{transform:rotate(0)}
}
@keyframes burst-sway{
  0%,88%,100%{transform:translateX(0)}
  89%{transform:translateX(-8px)} 90%{transform:translateX(8px)}
  91%{transform:translateX(-8px)} 92%{transform:translateX(8px)}
  93%{transform:translateX(-6px)} 94%{transform:translateX(6px)}
  95%{transform:translateX(-3px)} 96%{transform:translateX(0)}
}
@keyframes fab-blink{
  0%,92%,100%{opacity:0}
  93%,94%{opacity:1}
  95%{opacity:0}
  96%{opacity:1}
  97%{opacity:0}
}
@keyframes micro-pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }

/* mobile */
@media (max-width: 480px){
  :root{ --fab-size: 68px; --fab-right: 16px; --fab-bottom: 16px; }
}