:root {
  --dot-role-neutral: var(--signal);
  --dot-role-color: var(--dot-role-neutral);
  --dot-ring-stroke: var(--signal-stroke, 1px);
}

.tdc-dot-character {
  --dot-role-color: var(--dot-role-neutral);
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 1;
  isolation: isolate;
}
.tdc-dot-character[data-role="signal"] { --dot-role-color: var(--signal); }
.tdc-dot-character[data-role="spark"] { --dot-role-color: var(--spark); }
.tdc-dot-character[data-role="pulse"] { --dot-role-color: var(--pulse); }
.tdc-dot-character[data-role="link"] { --dot-role-color: var(--link); }
.tdc-dot-character__aura,
.tdc-dot-character__orbit,
.tdc-dot-character__mark { position: absolute; display: block; border-radius: 50%; pointer-events: none; }
.tdc-dot-character__aura {
  inset: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--dot-role-color) 26%, transparent), transparent 70%);
  opacity: .32;
  transform: scale(.92);
}
.tdc-dot-character__orbit {
  inset: 7%;
  border: var(--dot-ring-stroke) solid color-mix(in srgb, var(--dot-role-color) 38%, var(--line));
  border-inline-start-color: transparent;
  transform: rotate(-24deg) scaleY(.82);
  opacity: .68;
}
.tdc-dot-character__orbit::before,
.tdc-dot-character__orbit::after {
  position: absolute;
  inline-size: var(--space-2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  content: "";
  opacity: .88;
}
.tdc-dot-character__orbit::before { inset-block-start: 7%; inset-inline-start: 18%; }
.tdc-dot-character__orbit::after { inset-block-end: 14%; inset-inline-end: 5%; inline-size: var(--space-1); }
.tdc-dot-character__mark { inset: 25%; }
.tdc-dot-character__mark::before,
.tdc-dot-character__mark::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--dot-role-color);
  content: "";
  -webkit-mask: url('/assets/tdc-signal-mark.svg') center / contain no-repeat;
  mask: url('/assets/tdc-signal-mark.svg') center / contain no-repeat;
}
.tdc-dot-character__mark::before { background-color: var(--dot-previous-color, var(--dot-role-color)); }
.tdc-dot-character__mark::after { opacity: 0; }
.tdc-dot-character.is-role-transitioning .tdc-dot-character__mark::before,
.tdc-dot-character.is-role-transitioning .tdc-dot-character__mark::after { transition: opacity var(--motion-base) var(--ease-standard); }
.tdc-dot-character.is-role-transitioning .tdc-dot-character__mark::before { opacity: 0; }
.tdc-dot-character.is-role-transitioning .tdc-dot-character__mark::after { opacity: 1; }
.tdc-dot-character[data-state="idle"] .tdc-dot-character__mark { animation: tdc-dot-breathe 7s var(--ease-standard) infinite; }
.tdc-dot-character[data-state="listening"] .tdc-dot-character__orbit { opacity: 1; transform: rotate(-24deg) scale(1); }
.tdc-dot-character[data-state="thinking"] .tdc-dot-character__mark { animation: tdc-dot-thinking 1.8s linear infinite; }
.tdc-dot-character[data-state="thinking"] .tdc-dot-character__aura { animation: tdc-dot-glow 1.1s ease-in-out infinite alternate; }
.tdc-dot-character[data-state="speaking"] .tdc-dot-character__mark { animation: tdc-dot-speaking 640ms ease-in-out infinite alternate; }
.tdc-dot-character[data-state="speaking"] .tdc-dot-character__aura { animation: tdc-dot-glow 640ms ease-in-out infinite alternate; }
.tdc-dot-character[data-state="error"] .tdc-dot-character__orbit { border-style: dashed; opacity: .92; }
.tdc-dot-character[data-state="error"] .tdc-dot-character__mark { opacity: .72; }
.dot-guide-mark { display: block; inline-size: var(--space-10); block-size: var(--space-10); flex: 0 0 var(--space-10); }

@keyframes tdc-dot-breathe { 0%, 100% { transform: translateY(0) scale(.98); opacity: .92; } 50% { transform: translateY(calc(-1 * var(--space-1))) scale(1.03); opacity: 1; } }
@keyframes tdc-dot-thinking { to { transform: rotate(360deg); } }
@keyframes tdc-dot-speaking { to { transform: scale(1.08); } }
@keyframes tdc-dot-glow { to { opacity: .92; transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .tdc-dot-character__mark,
  .tdc-dot-character__aura { animation: none !important; }
  .tdc-dot-character.is-role-transitioning .tdc-dot-character__mark::before,
  .tdc-dot-character.is-role-transitioning .tdc-dot-character__mark::after { transition: none; }
  .tdc-dot-character[data-state="listening"] .tdc-dot-character__orbit { opacity: 1; }
  .tdc-dot-character[data-state="thinking"] .tdc-dot-character__aura,
  .tdc-dot-character[data-state="speaking"] .tdc-dot-character__aura { opacity: .86; transform: scale(1.08); }
}