/* ============================================================
   Ailo Chat — FAB v2 (Refined Circle, monochrome)
   Применяется только при #ailo-chat-root[data-fab="v2"]
   и fab_style="circle". Pill не затрагивается.
   ============================================================ */

/* ---------- 1. Размер кнопки ---------- */
#ailo-chat-root[data-fab="v2"] .ailo-fab--circle,
#ailo-chat-root[data-fab="v2"] .ailo-fab--circle .ailo-fab__btn {
  width: 62px;
  height: 62px;
}

/* ---------- 2. Монохромный градиент из брендового цвета + тень ---------- */
#ailo-chat-root[data-fab="v2"] .ailo-fab--circle .ailo-fab__btn {
  position: relative;
  background: radial-gradient(
    120% 120% at 30% 25%,
    color-mix(in srgb, var(--ailo-brand, #FF2D87) 82%, white) 0%,
    var(--ailo-brand, #FF2D87) 100%
  );
  box-shadow:
    0 10px 26px -6px rgba(var(--ailo-brand-rgb, 255, 45, 135), .50),
    0 4px 10px rgba(0, 0, 0, .14);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1),
              box-shadow .18s ease;
}

/* Фоллбэк на случай если браузер не поддерживает color-mix */
@supports not (background: color-mix(in srgb, red 50%, white)) {
  #ailo-chat-root[data-fab="v2"] .ailo-fab--circle .ailo-fab__btn {
    background: var(--ailo-brand, #FF2D87);
  }
}

/* ---------- 3. Hover ---------- */
#ailo-chat-root[data-fab="v2"] .ailo-fab--circle .ailo-fab__btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    0 16px 34px -6px rgba(var(--ailo-brand-rgb, 255, 45, 135), .55),
    0 6px 14px rgba(0, 0, 0, .18);
}

/* ---------- 4. Ring-пульс (на родителе, не на btn — чтобы не обрезался) ---------- */
#ailo-chat-root[data-fab="v2"] .ailo-fab--circle .ailo-fab__pulse {
  background: transparent;
  border: 2px solid var(--ailo-brand, #FF2D87);
  opacity: 0;
  animation: ailo-fab-ring-v2 3.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

#ailo-chat-root[data-fab="v2"] .ailo-fab--circle .ailo-fab__pulse-2 {
  display: none;
}

@keyframes ailo-fab-ring-v2 {
  0%   { transform: scale(1);    opacity: .5; }
  60%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ---------- 5. "Онлайн"-точка через ::after на .ailo-fab--circle ---------- */
/* Важно: точку рисуем НЕ на .ailo-fab__btn (там скорее всего overflow:hidden),
   а на родителе .ailo-fab--circle, чтобы не обрезалась. */
#ailo-chat-root[data-fab="v2"] .ailo-fab--circle {
  position: relative;
}

#ailo-chat-root[data-fab="v2"] .ailo-fab--circle::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #3ddc84;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  z-index: 5;
  pointer-events: none;
}

/* ---------- 6. SVG-аватар: масштабирование по родителю ---------- */
/* PHP уже передал нужные width/height в SVG через настройки,
   но дополнительно гарантируем, что SVG растягивается по .ai-avatar */
#ailo-chat-root[data-fab="v2"] .ailo-fab--circle .ai-avatar svg {
  width: 100%;
  height: 100%;
}