.askbennett-agent-mark {
  --bennett-agent-size: 40px;
  --bennett-agent-stroke: #f4f7f9;
  --bennett-agent-dot-1: #d58a38;
  --bennett-agent-dot-2: #72a9a7;
  --bennett-agent-dot-3: #18d7e8;

  display: inline-block;
  width: var(--bennett-agent-size);
  height: var(--bennett-agent-size);
  flex: 0 0 var(--bennett-agent-size);
  overflow: visible;
  vertical-align: middle;
}

.askbennett-agent-mark__b {
  fill: none;
  stroke: var(--bennett-agent-stroke);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.askbennett-agent-mark__dot {
  transform-box: fill-box;
  transform-origin: center;
}

.askbennett-agent-mark__dot--1 { fill: var(--bennett-agent-dot-1); }
.askbennett-agent-mark__dot--2 { fill: var(--bennett-agent-dot-2); }
.askbennett-agent-mark__dot--3 { fill: var(--bennett-agent-dot-3); }

.askbennett-agent-mark[data-state="idle"] .askbennett-agent-mark__b {
  opacity: 0.92;
}

.askbennett-agent-mark[data-state="idle"] .askbennett-agent-mark__dot {
  opacity: 0.58;
}

.askbennett-agent-mark[data-state="thinking"] .askbennett-agent-mark__b {
  animation: askbennett-agent-breathe 2.4s ease-in-out infinite;
}

.askbennett-agent-mark[data-state="thinking"] .askbennett-agent-mark__dot {
  animation: askbennett-agent-think 1.8s ease-in-out infinite;
}

.askbennett-agent-mark[data-state="thinking"] .askbennett-agent-mark__dot--2 {
  animation-delay: 0.18s;
}

.askbennett-agent-mark[data-state="thinking"] .askbennett-agent-mark__dot--3 {
  animation-delay: 0.36s;
}

@keyframes askbennett-agent-breathe {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

@keyframes askbennett-agent-think {
  0%, 24%, 100% {
    opacity: 0.32;
    transform: translateY(0) scale(0.72);
  }
  44% {
    opacity: 1;
    transform: translateY(-3px) scale(1.08);
  }
  66% {
    opacity: 0.58;
    transform: translateY(0) scale(0.86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .askbennett-agent-mark[data-state="thinking"] .askbennett-agent-mark__b,
  .askbennett-agent-mark[data-state="thinking"] .askbennett-agent-mark__dot {
    animation: none;
  }

  .askbennett-agent-mark[data-state="thinking"] .askbennett-agent-mark__dot {
    opacity: 0.78;
  }
}