/* ── Ailo Chat — inline mini-FAB, for embedding the launcher button
   inside host-page copy (outside #ailo-chat-root, so it carries its
   own color/shadow tokens rather than inheriting the root's). ── */

.ailo-fab-mini {
  --ailo-mini-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ailo-mini-size);
  height: var(--ailo-mini-size);
  vertical-align: middle;
  cursor: pointer;
  flex-shrink: 0;
}

.ailo-fab-mini__btn {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ailo-mini-brand, #E91E8C);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  transition: transform 180ms cubic-bezier(.32, .72, 0, 1);
}

.ailo-fab-mini:hover .ailo-fab-mini__btn,
.ailo-fab-mini:focus-visible .ailo-fab-mini__btn {
  transform: scale(1.08);
}

.ailo-fab-mini:focus-visible {
  outline: 2px solid var(--ailo-mini-brand, #E91E8C);
  outline-offset: 2px;
  border-radius: 50%;
}

.ailo-fab-mini .ai-avatar svg {
  width: 100%;
  height: 100%;
}

/* v2 refined variant — mirrors chat-fab-v2.css's gradient + online dot */
.ailo-fab-mini[data-fab-mini="v2"] .ailo-fab-mini__btn {
  background: radial-gradient(
    120% 120% at 30% 25%,
    color-mix(in srgb, var(--ailo-mini-brand, #E91E8C) 82%, white) 0%,
    var(--ailo-mini-brand, #E91E8C) 100%
  );
  box-shadow:
    0 6px 16px -4px rgba(var(--ailo-mini-brand-rgb, 233, 30, 140), .5),
    0 2px 6px rgba(0, 0, 0, .14);
}

@supports not (background: color-mix(in srgb, red 50%, white)) {
  .ailo-fab-mini[data-fab-mini="v2"] .ailo-fab-mini__btn {
    background: var(--ailo-mini-brand, #E91E8C);
  }
}

.ailo-fab-mini[data-fab-mini="v2"] {
  position: relative;
}

.ailo-fab-mini[data-fab-mini="v2"]::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 28%;
  height: 28%;
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  background: #3ddc84;
  border: 2px solid #fff;
  pointer-events: none;
}