.svg-container {
  border: 1.5px solid #e0e0e0; /* Thin gray border */
  border-radius: 10px; /* Rounded corners */
}

/* Base styles for your SVG anatomical parts */
#Myelin_Sheath,
#Axon,
#Cell_Body,
#Axon_Terminal,
#Dendrites {
  /* Initially, no stroke/outline */
  stroke: none; /* Make sure no outline appears by default */
  stroke-miterlimit: 10;
  /* Important: Make the entire area interactive, even if fill is transparent */
  pointer-events: all;
}

#Myelin_Sheath,
#Axon,
#Cell_Body,
#Axon_Terminal,
#Dendrites {
  fill: transparent; /* These are meant to be outlines only, so their fill is transparent */
}

/* NEW: Styles for the dots */
.anatomy-dot {
  fill: #c5c5ff; /* Your specified fill color */
  stroke: #000; /* Thin black border - this is your desired default */
  stroke-width: 3px;
  cursor: pointer; /* Indicate it's clickable */

  /* Animation properties */
  animation: pulse 1.5s infinite alternate;

  /* FIX FOR SVG PULSING: */
  transform-box: fill-box; /* Crucial for SVG elements to define the origin box */
  transform-origin: center center; /* This now correctly refers to the element's visual center */

  /* Add transitions for smooth hover effects if you want them */
  /* transition: stroke-width 0.3s ease-in-out, stroke 0.3s ease-in-out; */
}

.anatomy-dot:hover {
  fill: #6e6eff; /* Your specified fill color */
  stroke: #fff; /* Thin black border - this is your desired default */
  stroke-width: 8px;
  cursor: pointer; /* Indicate it's clickable */
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2); /* Adjust this value for stronger/weaker pulse */
    opacity: 0.7; /* Adjust for transparency during pulse */
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}